我是这样打算的，前端用nginx代理，使用80 转443 端口走https
前端的地址就是http://yumbo.top 或https://yumbo.top
后端服务地址是：http://yumbo.top:8081
下面是我的完整配置，功能是正常的，加了注释
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/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 /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
# include /etc/nginx/conf.d/*.conf;
# 以下属性中以ssl开头的属性代表与证书配置有关，其他属性请根据自己的需要进行配置。
server {
listen 443 ssl; #SSL协议访问端口号为443。此处如未添加ssl，可能会造成Nginx无法启动。
server_name yumbo.top; #将localhost修改为您证书绑定的域名，例如：www.example.com。
root html;
index index.html index.htm;
ssl_certificate /etc/nginx/yumbo.top.pem; #替换成您证书的文件名。
ssl_certificate_key /etc/nginx/yumbo.top.key; #替换成您证书的密钥文件名。
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; #使用此加密套件。
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #使用该协议进行配置。
ssl_prefer_server_ciphers on;
charset utf-8;
location / {
root /etc/nginx/web; #站点目录。
index index.html index.htm;
}
#/api是vue中配置的代理路径
location /api/ {
add_header Content-Type 'application/json; charset=utf-8';
proxy_pass http://yumbo.top:8081/;#后端服务地址
proxy_set_header Origin http://yumbo.top:8081/;#这个要和后端服务地址一样，不然会出现跨域问题
proxy_set_header Host $proxy_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Access-Control-Allow-Origin *;
proxy_set_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
proxy_set_header Access-Control-Allow-Headers 'Content-Type, Authorization';
}
}
server {
listen 80;
server_name yumbo.top;
rewrite ^(.*)$ https://${server_name}$1 permanent;
}
}
问题的发现
起初nginx没有配置好，出现了Invalid CORS request 或者403等之类的错误。
通过chrome无痕窗口访问网站，发现一个很奇特的现象，有个别几个接口是好的（login, menu, ringData）。
其他接口都出现了Invalid CORS request 状态403
我再三确认过axios 以及 后端springboot项目跨域都是允许的
axios我是这样配的，所有请求都是通过这个axios创建得到的axios对象，但是detail接口发现是403 response返回Invalid CORS request ，包括其他接口也都是403，就奇怪了，为什么那几个接口为什么没有出现跨域？
axios.create({
baseURL: (process.env.NODE_ENV === 'production' ? process.env.server : '') + '/api',
withCredentials: true,
headers
})
为了排查这个问题，我用postman去测接口。
比如去测这个detail接口https://yumbo.top/api/dashboard/ringData/detail
发现postman能成功返回数据，包括不走nginx代理，直接访问接口http://yumbo.top:8081/api/dashboard/ringData/detail
也都能正常返回数据
但是 ！！！ 部署上服务器后，就出现了上面截图 detail 跨域了。非常的困惑
后面看了这篇文章，了解了为什么会产生跨域：
- 403 Invalid CORS request 跨域问题 invalid+cors+request什么意思
一开始也没认真去看这篇文章，文章的内容和实际是有差别的。
有些场景可能多个因素造成跨域。
通过postman我确认了后端服务正常，nginx 80 转443 代理正常，接口能通过https://yumbo.top/api/dashboard/ringData/detail 获得数据，但是部署上去的项目就是会出现下面这种
因为看过之前提到的哪篇文章，我知道 跨域是根据http header中的Origin 和 Request URL进行比较。
一开始我没有怀疑是nginx的问题，因为我发现postman能够拿到接口数据，那按道理是前端axios与nginx之间的问题。
于是我尝试postman 的header中添加Origin
无非就是下面这些情况，一个一个试
- https://yumbo.top
- http://yumbo.top
- http://yumbo.top:8081
一开始呢，我将Origin 值和我nginx地址填的一致https://yumbo.top，我试了一下，我发现原先可以拿到接口数据的变成了和我chrome访问网站的结果一样Invalid CORS request
于是我又试了一下第3种情况 http://yumbo.top:8081 发现拿到了后端接口数据
于是我就回头找之前出现 Invalid CORS request 的请求头
发现Request Headers里有这个字段。于是就明白了，原来是axios自动的给请求头加了Origin，或者说是更底层 XMLRequest自动加的。
这个我们不用改axios，因为没必要改。
通过上述一系列的尝试，加上一些文章的内容，我们了解到，原来我遇到的跨域是因为我代理的后端服务地址http://yumbo.top:8081 而请求头中的Origin是https://yumbo.top(浏览器看到是是假的，因为后面被nginx转发了请求)
总结
得到Invalid CORS request的结果是因为Origin的值http://yumbo.top（前端浏览器，axios根据当前域自动添加的）和后端代理的接口地址http://yumbo.top:8081不一致。
我们知道nginx是可以修改请求头的，只要在nginx转发的那个地方加上Origin就可以解决这个问题。
下面是关键信息，只要这2个一致就行了
location /api/ {
proxy_pass http://yumbo.top:8081/;#后端服务地址
proxy_set_header Origin http://yumbo.top:8081/;#这个要和后端服务地址一样，不然会出现跨域问题
}
具体的其他一些关于nginx的配置，可以参考我前面完整的nginx配置
补充一下，为什么会出现个别请求没有出现跨域
因为后端springboot用的是@GetMapping
其他接口我都是用@PostMapping
根据我之前翻阅的文章知道，针对一些简单请求，比如get请求，或者个别请求是不会出现跨域的。
