nginx用反向代理机制解决跨域的问题

Posted 2020-10-19

什么是跨域？

使用js获取数据时，涉及到的两个url只要协议、域名、端口有任何一个不同，都被当作是不同的域，相互访问就会有跨域问题。

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：

http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

背景

大家看了上面的跨域介绍，相信都大致了解所谓的跨域访问。正好我们公司这两天就有这种需求，公司前端工程师提出需要跨域访问，需求如下：

nginx服务器：172.18.18.75

h5服务器：172.18.18.76

java服务器：172.18.18.77

新增加域名：www.oilup.com  指向 nginx服务器（172.18.18.75）

域名指向的静态目录：/usr/local/nginx/html/web/ 目录放在nginx服务器（172.18.18.75）

[[email protected] web]# pwd /usr/local/nginx/html/web [[email protected] web]# ls css          handlebars  images      init.html  package.json  README.md gulpfile.js  html        index.html  js         pc.zip        template

当访问域名http://www.oilup.com/  调用  http://172.18.18.76:7080

当访问域名http://www.oilup.com/  调用  http://172.18.18.77:8888

如何解决

进入nginx服务器，配置nginx.conf：

#vim /usr/local/nginx/conf/nginx.conf http {     include       mime.types;     default_type  application/octet-stream;     sendfile        on;     #增加下面3行     add_header Access-Control-Allow-Origin *;     add_header Access-Control-Allow-Headers X-Requested-With;     add_header Access-Control-Allow-Methods GET,POST,OPTIONS;     ......     其它http项的配置省略          #配置server，用location匹配并反向代理proxy_pass     server {         listen       80;         server_name  www.oilup.com;                  location / {            root   html/web;                              index  index.html index.htm;         }                  location  /h5/ {                           rewrite  ^.+h5/?(.*)$ /$1 break;            include  uwsgi_params;           proxy_pass   http://172.18.18.76:7080;         }                  location  /javaes/ {           rewrite  ^.+javaes/?(.*)$ /$1 break;           include  uwsgi_params;           proxy_pass   http://172.18.18.77:8888;         } }

重启nginx服务:

/usr/local/nginx/sbin/nginx -s reload

测试访问