请求跨域就是指:当前发起请求的域与该请求指向的资源所在的域不一样,凡是发送请求的url的 协议、域名、端口号三者之间任意一者与当前页面地址不同的请求即被视为是跨域请求。
跨域问题产生的本质是浏览器的同源策源CORS的限制,如果在出现请求跨域且服务器没有明确表示支持跨域的时候,浏览器就会自动拦截请求的发送,但也就是如果服务器明确表示自己支持跨域,那么跨域问题就不存在了。
原因是服务器并不受浏览器同源策略的限制,不同服务器之间可以任意的交换数据,而不用担心跨域问题,所以使用nginx就是将nginx服务器
当做自己的代理服务器,由nginx服务器
去帮助我们发送请求,并将接受到的数据返回给我们,这样就可以避免触发浏览器的同源策略。
使用nginx时请求的转发途径如下,可以看到和目标服务器的通信都是通过nginx
来完成的,这样就可以避免浏览器的同源策略限制,可以正常的接发请求了。
但要注意,此时要确保浏览器和nginx服务器在同一个域名下。
浏览器 --> nginx --> 目标服务器
↓
浏览器 <-- nginx
通过配置CORS头部来
nginx.conf
的配置
server {
listen 80;
server_name 127.0.0.1;
root html/dist;
index login.html index.html;
# 允许跨域请求的域名
add_header Access-Control-Allow-Origin *; # 指定允许访问的域名。可以设置为具体的域名,例如https://example.com,也可以设置为通配符*,表示允许任何域名访问。
add_header Access-Control-Allow-Credentials true; # 是否允许发送身份凭证(如cookies、HTTP认证等)。
add_header Access-Control-Allow-Methods '*'; # 指定允许的HTTP方法,例如GET、POST、PUT等。
location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass <http://127.0.0.1:8080/>;
}
}
Access-Control-Allow-Origin
参数是必须的,指明允许跨域的域名