科普文：软件架构Nginx系列之【CORS和Nginx跨域配置详解】

-无-为-

于 2024-08-24 00:39:06 发布

阅读量858

点赞数 23

分类专栏：软件架构 springcloud 业务场景文章标签： nginx 运维 CORS 跨域同源策略

本文链接：https://blog.csdn.net/Rookie_CEO/article/details/141477051

版权

软件架构同时被 3 个专栏收录

676 篇文章 12 订阅

订阅专栏

业务场景

384 篇文章 1 订阅

订阅专栏

springcloud

345 篇文章 1 订阅

订阅专栏

跨域访问

什么是JSONP？

JSONP其实就是JSON另外一种的使用模式，一般情况下，我们都是用JSONP去解决跨域访问的问题。

对于同源策略，如果遇到两个域名不同的网站是不能进行沟通的，但是对于网站的html中的元素就是一个例外。网页可以从其他源产生JSON，但是JSONP抓到的并不是JSON。

什么是跨域？

1.CORS全称Cross-Origin Resource Sharing，意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问就会遇到跨域问题。
2.跨域是指浏览器不能执行来自其它网站的脚本，是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。（需要注意的是，跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了）

引出同源策略

1.之所以会出现跨域现象，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。
2.同源的存在，又可以保护用户隐私信息，防止身份伪造等。

同源策略限制内容

Cookie、LocalStorage等存储性内容
DOM 节点
AJAX 请求不能发送

只有有任何一个地方不同，就认为是跨域。如果非同源（跨域）会受到 AJAX 请求不能发送。

我们在项目中，需要设置对跨域访问的支持，是因为项目的架构需要，例如：

公司内部有多个不同的子系统，例如A和B，分别部署在不同的服务器上，其域名也不相同
由于公司内部的数据需要，现在A系统中，跨域访问B系统，从而获取内部的一些信息资源

如何解决跨域问题？

由于浏览器同源策略导致Web应用访问其他站点资源时出现跨域问题。如下图

使用JSONP：前端技术使用 jQuery的ajax解决方案，服务端使用JSON.toJSONString。

使用CORS：在响应头上添加Access-Control-Allow-Origin属性，指定同源策略的地址。同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了CORS，并且允许的源包括了本网站，那么就不会拦截对应的请求响应。(对比jsonp，优点在于功能更加强大支持各种HTTP Method，缺点是兼容性不如JSONP)

前端：支持原生ajax、jQuery ajax、vue、axios
服务端：支持Java、Nodejs、Python、PHP等

指定的页面设置document.domain属性：指定的页面就可以共享Cookie。

Nginx反向代理：配置nginx(修改nginx目录下的nginx.conf)，在这个服务器上配置多个前缀来转发http/https请求到多个真实的服务器即可。

这样，这个服务器上所有url都是相同的域名、协议和端口。这样对于浏览器来说，这些url都是同源的，就不会有跨域限制了。

Nginx跨域配置

打开Nginx根目录，config，找到 nginx.cnf 文件，新增如下配置：

server {
		listen       80;
		server_name  localhost 127.0.0.1;

		location / {			
			root   c:\root\www\dist;
			index  index.html index.htm;
			# 解决Vue3 history 模式报404问题,Vue2可忽略
			try_files $uri $uri/ /index.html;
		}
		
		location /api {
			add_header 'Access-Control-Allow-Origin' $http_origin;
			add_header 'Access-Control-Allow-Credentials' 'true';
			add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
			add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
			add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
			if ($request_method = 'OPTIONS') {
				add_header 'Access-Control-Max-Age' 1728000;
				add_header 'Content-Type' 'text/plain; charset=utf-8';
				add_header 'Content-Length' 0;
				return 204;
			}
			proxy_pass http://127.0.0.1:8010;
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header X-Forwarded-Proto $scheme;
			proxy_connect_timeout 5;
		}
	}

特别说明：

（1）/api，表示监听所有“/api”开头的请求，比如后台接口：http://example.com/api/news/search?page=1&size=50。

（2）关于端口，80是前台页面的端口、8010是服务端api端口。

测试，已经能够正常返回数据！