前端用nginx解决js跨域问题

最新推荐文章于 2024-08-05 18:02:39 发布

DN金猿

最新推荐文章于 2024-08-05 18:02:39 发布

阅读量1.9k

点赞数

文章标签： vue.js 前端 nginx

原文链接：https://www.dazhuanlan.com/coeeya118/topics/1259365

版权

nginx专栏专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言

公司的一个项目，页面需要给第三方接口发送一个请求，获取第三方接口生成的一个二维码图片，结果 js 跨域获取资源报错:” No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
网上查资料说能使用 nginx 来解决，但介绍的都比较粗略，只介绍 nginx 的单向代理，这里详细介绍怎么用 nginx 进行一个正向代理加一个反向代理来解决 tomcat 的 js 跨域问题

js 的跨域问题

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 javascript 施加的安全限制。
所谓同源是指，域名，协议，端口都相同。浏览器执行 javascript 脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

背景介绍

tomcat 的端口：6080
页面 url：100.10.10.10:6080/input.do?user=test
第三方二维码获取接口：111.11.11.11:7788/make/code

我们启动 tomcat 的端口是 6080，页面为 100.10.10.10:6080/input.do?user=test，页面有个按钮，点击后会向第三方接口 111.11.11.11:7788/make/code 获取一个二维码，因为页面的 IP、端口和第三方接口的 IP、端口不一致，所以 js 不能直接获取到二维码

处理流程图

nginx 安装

nginx 有三个依赖包 zlib，openssl，prce
网上下载 zlib，openssl，prce，nginx 四个安装包
解压四个压缩包，make 安装
例：

1 2	./configure --prefix=~/nginx --with-openssl=~/openssl-fips-2.0.16 --with-prce=~/pcre-8.42 --with-zlib=~/zlib-1.2.11 make & makeinstall

修改 nginx 配置文件

nginx 配置文件

nginx 的配置文件为 nginx.conf，主要由六个部分组成

main：用于进行 nginx 全局信息的配置
events：用于 nginx 工作模式的配置
http：用于进行 http 协议信息的一些配置
server：用于进行服务器访问信息的配置
location：用于进行访问路由的配置
upstream：用于进行负载均衡的配置

main                                # 全局配置

events {                            # nginx工作模式配置

}

http {                              # http设置
    ....
    server {                        # 服务器主机配置
        ....
        location {                  # 路由配置
            ....
        }

        location path {
            ....
        }

        location otherpath {
            ....
        }
    }

    upstream name {                 # 负载均衡配置
        ....
    }
}

nginx 配置文件详细介绍见附录

反向代理

我们先用 nginx 做一个反向代理，当我们访问 nginx 的监听端口时，跳转到 tomcat 的监听端口

1.在 http 配置中增加一个负载均衡配置项

   upstream tomcat_web {
    ip_hash;
 server 100.10.10.10:6080 max_fails=2 fail_timeout=30s ;
}

2.在 http 配置的 server 下新增一个对应的 location

location / {
    proxy_pass http://tomcat_web;
    proxy_redirect off;
    proxy_set_header Host $host:$server_port;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Real-PORT $remote_port;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
}

PS:
location 后面/表示把访问 nginx 端口的 url 全部映射 tomcat 的 url，即我们需要访问 tomcat 的 url：100.10.10.10:6080/input.do?user=test，我们通过 nginx 的端口进行跳转，可以访问 100.10.10.10:8050/input.do?user=test

正向代理

我们再用 nginx 做一个正向代理，js 通过 nginx 的端口来访问第三方 url 来获取二维码
1.在 http 配置中增加一个负载均衡配置项

upstream qrcode_server {
    ip_hash;
    server 111.11.11.11:7788 max_fails=2 fail_timeout=30s ;
}

2.在 http 配置的 server 下新增一个对应的 location

location ^~ /make/ {
    proxy_pass http://qrcode_server;
    proxy_redirect off;
    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_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
    access_log logs/qrcode_access.log main;

}

PS:
这个 location 只会对像 IP:port/make/…的 url 进行跳转
正则匹配范围较小的 location 需要放在范围较大的 location 前面
程序里 js 调用 nginx 的端口加第三方接口不带 IP 和端口的 url，即通过访问 100.10.10.10:8050/make/code 就等同于访问第三方接口 url：111.11.11.11:7788/make/code