业务场景描述: 页面发起的所有请求都是https
- 前端vue写的 发布后部署在iis上 监听内网端口F 绑定域名front.com
- 后端代码netcore写的 部署在centos上 监听内网端口
B
nginx对外提供一个域名供前端调用 域名假定:backend.com
http请求过程:
浏览器输入域名https://front.com
=>Nginx1监听域名front.com 443端口 -> 转发内网端口F
=> vue调用后端接口 https://backend.com/login
=> Nginx2监听域名backend.com 443端口 -> 转发内网端口B
大的模块:
net core
项目部署及跨域配置nginx
配置证书及转发请求- 跨域的一些问题
一. net core 项目配置
注意事项: origin
为*
时候 allowcredentials
不能是true
不然会报错
至于为什么不允许origin
和credentials
一块配置 应该是考虑到CSRF
攻击有关 可以反向思考下origin
配置为*
时又允许credentials
会怎么样 以后理解了补充上
还有一点 怎么指定 代码允许在哪个ip及端口 一般默认就是localhost:5000 可以看下面代码
二. nginx
配置证书及转发
1. vue
项目nginx
配置
http://127.0.0.1:2277/
就是部署在iis上的前端代码
server {
listen 80;
listen 443 ssl;
server_name www.front.com front.com;
if ($server_port !~ 443){
return 307 https://$host$request_uri;
}
ssl_certificate ssl/1_front.com_bundle.crt;
ssl_certificate_key ssl/2_front.com.key;
gzip on;
gzip_proxied expired no-cache no-store private no_last_modified no_etag auth;
gzip_types *;
gzip_vary on;
location / {
proxy_pass http://127.0.0.1:2277/;
}
}
2. 后台接口nginx
配置
可以设置二级地址转发 这样就可以对外一个域名
http://10.0.1.5:15365/
是部署在centos机器上的 netcore服务器代码
server {
listen 443 ssl;
server_name backend.com www.backend.com;
ssl_certificate /usr/local/nginx/ssl/1_backend.com_bundle.crt;
ssl_certificate_key /usr/local/nginx/ssl/2_backend.com.key;
gzip on;
gzip_proxied expired no-cache no-store private no_last_modified no_etag auth;
gzip_types *;
gzip_vary on;
location /agent/ {
#root /usr/src/gameclient/;
#index index.html index.htm;
proxy_pass http://10.0.1.5:15365/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /event/ {
#root /usr/src/gameclient/;
#index index.html index.htm;
proxy_pass http://10.0.1.5:49835/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
三. 跨域的一些问题
- 如果你的后台接口清楚的知道是给哪些域名调用的, 建议配置
origin
就是第一张图的注释掉的部分 ,然后在配置文件配置允许跨域的域名/ip:port
如果是需要对所有公网暴露的接口 则设置origin
为*
这是 withcredentials
要注释掉
- 我把上面服务端代码部署完后, postman调用 https post接口 正常返回
但是部署后就报错 截图如下
不知道大家看明白了没 就是前端发起 XMLHttpRequest
发出请求时 将 withCredentials
设置为 true
。而服务端返回的response
头中
Access-Control-Allow-Origin
为true
导致的 但是通过chrome给我呈现的http请求响应来看 看不到有效响应信息
但是用Firefox浏览器就捕捉到这个问题了
下面是Firefox的截图 可以看到只发送了一个options
的预请求,并没有发送正式请求 options
的响应头的确是 Access-Control-Allow-Origin
为 *
控制台报错点击详情看下面2图
问题很明显了 前端在发送XMLHttpRequest
请求时,将withCredentials
设置为 true
导致的
排查前端代码发现确实如此 去掉之后请求正常 因为我们程序没有用cookie
所以这个自然不需要
到此问题排查完毕