nginx解决dev环境前端跨域

74 阅读2分钟

什么是跨域?

跨域是浏览器的一种安全措施和安全策略,它不允许两个不同地址之间进行通信,其中以下有一项不满足则存在跨域问题
1 协议名不同
2 域名不同
3 端口不同

居然浏览器存在跨域问题,那么其中的一种解决方式就是使用nginx来进行代理跨域,因为跨域只是浏览器的安全策略,在服务器间并不存在这个问题
所以就可以通过这点来进行服务端跨域,当然,也可以在自己的项目接口中设置允许跨域,设置允许跨域只需在响应头增加以下字段即可
Access-Control-Allow-Origin *;
Access-Control-Allow-Methods 'POST, GET, PUT, OPTIONS, DELETE, PATCH';
Access-Control-Allow-Headers *;
Access-Control-Expose-Headers *;
使用这种方式解决跨域,代表着在所有域名下都可以访问项目接口,这样显然是不安全的,这个时候就可以通过Nginx来进行跨域并且能保证项目接口的安全性

具体实现流程是浏览器端访问nginx服务器,nginx服务器将浏览器的请求转发给项目接口,然后项目接口将结果返回给nginx,然后nginx再返回给浏览器,
通过nginx在中间做一层接口转发,但是需要将nginx设置成允许跨域,只有这样浏览器才能访问到nginx服务,具体操作如下

server {  
listen 80;  
server_name localhost;  
  
location /api {  
proxy_pass https://www.xxx.com; 接口服务器  
  
# 设置允许跨域访问的头信息  
add_header Access-Control-Allow-Origin *;  
add_header Access-Control-Allow-Methods 'POST, GET, PUT, OPTIONS, DELETE, PATCH';  
add_header Access-Control-Allow-Headers *;  
add_header Access-Control-Expose-Headers *;  
  
client_max_body_size 50m;  
proxy_http_version 1.1;  
proxy_set_header Upgrade $http_upgrade;  
proxy_set_header Connection 'upgrade';  
proxy_set_header Host $host;  
proxy_cache_bypass $http_upgrade;  
rewrite ^/api(.*)$ $1 break; 将/api去除掉,请求接口服务器的时候不携带/api前缀  
    }  
}

然后通过nginx -t 进行语法检查,没出现语法错误则nginx -s reload
浏览器端就可以通过fetch('http://localhost:80/api/xxx/xxx') 来访问项目接口了

个人公众号:银子怪 欢迎大家多多关注!