一、为什么会出现跨域问题
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的。javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port。
二、什么是跨域
1.当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
nginx 是静态页面的web服务器，服务器与服务器之间访问是不存在跨域的，所以通过nginx服务器去代理访问后端服务就不会跨域，跨域只在本地会出现，线上的地址访问不会出现跨域的。
nginx.conf 文件配置：
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}文章来源地址https://www.toymoban.com/news/detail-421238.html
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
#root html;
# 此处注意地址为指向你本地启动的前端项目的目录（即你的本地前端项目的所在地址，注意nginx用的是反斜杠/），如果是vue项目就是index.html的上一级目录（前端启动axios请求的baseURL = ''，配置好后前端访问不要访问启动的项目地址，直接访问nginx代理地址：127.0.0.1，因为是本地启动的nginx，所以直接访问127，nginx默认端口是80），如果是静态的html项目，也是index.html的上一级目录.
#如果发布线上的项目配置的nginx这里就是存放的是vue打包后dist包的地址的上一层目录，也就是说vue前端包放在html目录的下面
root D:/abc/H5/html;
index index.html index.html;
}
#下面就是配置的需要代理的后端接口的服务地址，表示所有以/custom/开头的接口请求服务代理到http://10.18.21.124:8888上，返回相应的数据
location /custom/ {
proxy_pass http://10.18.21.124:8888;
}
location /ram/ {
proxy_pass http://10.18.21.124:8888;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
前端启动axios请求的baseURL = ''，配置好后前端访问不要访问启动的项目地址，直接访问nginx代理地址：127.0.0.1，因为是本地启动的nginx，nginx已经指向启动的前端项目，所以直接访问127.0.0.1，nginx默认端口是80
二 如果是vue项目可以直接在vue.config.js里面配置
例如：
const url = 'http://30.11.20.99:8888' // 连接后端接口的服务地址
// const url = 'http://localhost:8080'
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css', 'less', 'html', 'png', 'svg', 'jpg', 'json', 'ico', 'txt']
const px2rem = require('postcss-px2rem')
const postcss = px2rem({
remUnit: 10
})
module.exports = {
// publicPath: process.env.VUE_APP_ENVIRONMENT === 'XG_prod' ? '/lggy' : '/',
publicPath: '/',
outputDir: 'dist',
productionSourceMap: false,
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
]
},
css: {
loaderOptions: {
less: {
modifyVars: {
'primary-color': '#28439d'
// 'link-color': '#1DA57A',
// 'border-radius-base': '2px',
// 'layout-header-background': '#1890ff',
// 'menu-dark-submenu-bg': '#00508e'
},
javascriptEnabled: true,
postcss: {
plugins: [
postcss
]
}
}
}
},
devServer: {
disableHostCheck: true,
proxy: {
'/auth': {
target: url,
changeOrigin: true
},
'/meta': {
target: url,
changeOrigin: true
},
'/report': {
target: url,
changeOrigin: true
},
'/ram': {
target: url,
changeOrigin: true
},
'/custom': {
target: url,
changeOrigin: true
},
'/os-public': {
// target: 'http://10.18.36.130:8888',
target: 'http://10.18.21.124:8888',
changeOrigin: true
},
'/dw-api': {
target: 'http://47.100.53.88:9090',
changeOrigin: true
}
}
},
lintOnSave: true文章来源：https://www.toymoban.com/news/detail-421238.html
}
到了这里，关于nginx 配置解决前端跨域问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
