什么是请求跨域

请求跨域就是指:当前发起请求的域与该请求指向的资源所在的域不一样,凡是发送请求的url的 协议、域名、端口号三者之间任意一者与当前页面地址不同的请求即被视为是跨域请求。

跨域问题产生的本质

跨域问题产生的本质是浏览器的同源策源CORS的限制,如果在出现请求跨域且服务器没有明确表示支持跨域的时候,浏览器就会自动拦截请求的发送,但也就是如果服务器明确表示自己支持跨域,那么跨域问题就不存在了。

nginx解决跨域问题的原理

原因是服务器并不受浏览器同源策略的限制,不同服务器之间可以任意的交换数据,而不用担心跨域问题,所以使用nginx就是将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/>;
				}
    }

注意事项

  1. 注意要将项目中的请求和nginx设置在同一个域名下
  2. Access-Control-Allow-Origin 参数是必须的,指明允许跨域的域名

参考文档

  1. Nginx如何解决浏览器跨域问题、Cors跨域资源共享解决跨域问题、浏览器的同源策略原理(Same-Origin Policy)源站Origin_nginx解决跨域问题原理-CSDN博客
  2. Nginx配置HTTP响应头修改和添加 | ModStart | 如何添加和设置nginx的响应头信息