什么是跨域?
跨域是浏览器的一种安全措施和安全策略,它不允许两个不同地址之间进行通信,其中以下有一项不满足则存在跨域问题
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') 来访问项目接口了
个人公众号:银子怪 欢迎大家多多关注!