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

本文涉及的产品
.cn 域名,1个 12个月
简介:

什么是跨域?

使用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)

[root@localhost web]# pwd

/usr/local/nginx/html/web

[root@localhost 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


测试访问

image.png


本文转自甘兵 51CTO博客,原文链接:http://blog.51cto.com/ganbing/2056654,如需转载请自行联系原作者
相关文章
|
8天前
|
缓存 负载均衡 应用服务中间件
Nginx七层(应用层)反向代理:HTTP反向代理proxy_pass篇
通过使用Nginx的反向代理功能,可以有效地提高Web应用的性能、安全性和可扩展性。配置过程中需要注意不同场景下的具体需求,如负载均衡、SSL终止和缓存策略等。正确配置和优化Nginx反向代理可以显著提升系统的整体表现。
46 18
|
2月前
|
负载均衡 监控 应用服务中间件
配置Nginx反向代理时如何指定后端服务器的权重?
配置Nginx反向代理时如何指定后端服务器的权重?
190 61
|
2月前
|
缓存 负载均衡 安全
Nginx的反向代理具体是如何实现的?
Nginx的反向代理具体是如何实现的?
|
29天前
|
缓存 Java 应用服务中间件
nginx的正向代理和反向代理以及tomcat
Nginx的正向代理和反向代理功能在不同的场景中具有重要作用,正向代理主要用于客户端访问控制和匿名浏览,而反向代理则用于负载均衡和高可用性服务。Tomcat作为Java Web应用服务器,与Nginx结合使用,可以显著提升Web应用的性能和稳定性。通过合理配置Nginx和Tomcat,可以构建高效、稳定和可扩展的Web服务架构。
148 11
|
1月前
|
存储 应用服务中间件 nginx
nginx反向代理bucket目录配置
该配置实现通过Nginx代理访问阿里云OSS存储桶中的图片资源。当用户访问代理域名下的图片URL(如 `http://代理域名/123.png`)时,Nginx会将请求转发到指定的OSS存储桶地址,并重写路径为 `/prod/files/2024/12/12/123.png`。
80 5
|
2月前
|
缓存 负载均衡 算法
如何配置Nginx反向代理以实现负载均衡?
如何配置Nginx反向代理以实现负载均衡?
|
2月前
|
存储 负载均衡 中间件
Nginx反向代理配置详解,图文全面总结,建议收藏
Nginx 是大型架构必备中间件,也是大厂喜欢考察的内容,必知必会。本篇全面详解 Nginx 反向代理及配置,建议收藏。
Nginx反向代理配置详解,图文全面总结,建议收藏
|
2月前
|
应用服务中间件 API nginx
nginx配置反向代理404问题
【10月更文挑战第18天】本文介绍了使用Nginx进行反向代理的配置方法,解决了404错误、跨域问题和302重定向问题。关键配置包括代理路径、请求头设置、跨域头添加以及端口转发设置。通过调整`proxy_set_header`和添加必要的HTTP头,实现了稳定的服务代理和跨域访问。
620 1
nginx配置反向代理404问题
|
2月前
|
安全 应用服务中间件 网络安全
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
132 3
|
2月前
|
安全 应用服务中间件 网络安全
配置Nginx反向代理实现SSL加密访问的步骤是什么?
我们可以成功地配置 Nginx 反向代理实现 SSL 加密访问,为用户提供更安全、可靠的网络服务。同时,在实际应用中,还需要根据具体情况进行进一步的优化和调整,以满足不同的需求。SSL 加密是网络安全的重要保障,合理配置和维护是确保系统安全稳定运行的关键。
205 3