前端 用nginx解决js跨域问题
前言
公司的一个项目,页面需要给第三方接口发送一个请求,获取第三方接口生成的一个二维码图片,结果 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:用于进行负载均衡的配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
main # 全局配置events { # nginx工作模式配置}http { # http设置....server { # 服务器主机配置....location { # 路由配置....}location path {....}location otherpath {....}}upstream name { # 负载均衡配置....} } |
nginx 配置文件详细介绍见附录
反向代理
我们先用 nginx 做一个反向代理,当我们访问 nginx 的监听端口时,跳转到 tomcat 的监听端口
1.在 http 配置中增加一个负载均衡配置项
1 2 3 4 |
upstream tomcat_web {ip_hash;server 100.10.10.10:6080 max_fails=2 fail_timeout=30s ; } |
2.在 http 配置的 server 下新增一个对应的 location
1 2 3 4 5 6 7 8 9 |
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 配置中增加一个负载均衡配置项
1 2 3 4 |
upstream qrcode_server {ip_hash;server 111.11.11.11:7788 max_fails=2 fail_timeout=30s ; } |
2.在 http 配置的 server 下新增一个对应的 location
1 2 3 4 5 6 7 8 9 10 |
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
附录
nginx 配置详解博客:
Nginx安装及配置详解 - 枫飞飞 - 博客园
前端 用nginx解决js跨域问题相关推荐
- firefox如何载入json文件_如何去解决JS跨域问题 怎么能学好Web前端开发
如何去解决JS跨域问题?怎么能学好Web前端开发?JavaScript跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过JS获取页面中不同域的框架中(if ...
- 解决js跨域使用nginx配置问题
解决js跨域使用nginx配置问题 参考文章: (1)解决js跨域使用nginx配置问题 (2)https://www.cnblogs.com/phpzhou/p/11132674.html 备忘一下 ...
- jsonp-反向代理-CORS解决JS跨域问题的个人总结
jsonp-反向代理-CORS解决JS跨域问题的个人总结 网上说了很多很多,但是看完之后还是很混乱,所以我自己重新总结一下. 解决 js 跨域问题一共有8种方法, jsonp(只支持 get) 反向代 ...
- 解决js跨域调用WebApi的问题
解决js跨域调用WebApi的问题 参考文章: (1)解决js跨域调用WebApi的问题 (2)https://www.cnblogs.com/qubernet/p/6396295.html 备忘一下 ...
- Nginx 解决WebApi跨域二次请求以及Vue单页面问题
Nginx 解决WebApi跨域二次请求以及Vue单页面问题 参考文章: (1)Nginx 解决WebApi跨域二次请求以及Vue单页面问题 (2)https://www.cnblogs.com/ji ...
- nginx解决浏览器跨域问题_使用nginx解决浏览器跨域
什么是浏览器跨域? 跨域就是指浏览器具有同源策略,浏览器不会执行访问其它网址数据的js脚本,比如说访问其它网址的cookie数据,调用其它网址的api接口. 什么是同源? 协议,域名,端口均相同的情况 ...
- iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
- nginx解决浏览器跨域问题_前端通过Nginx反向代理解决跨域问题
在前面写的一篇文章SpringMVC解决跨域问题,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式 ...
- nginx解决浏览器跨域问题_Nginx解决前端跨域问题 CORS跨域配置
最近连续两个朋友问我跨域相关问题,我猜想可能不少朋友也遇到类似问题,我打算写个博客聊一下我实际使用的配置, 先说明一下,我并不太了解这配置,没精力去了解太多,但我觉得其中有一些关键的小注意点,可能有些 ...
最新文章
- 100多个Android Demo的整合
- zoj-4011(动态规划)
- python语言整数类型-Python 的内置数值类型
- AtCoder Beginner Contest 179 总结
- 【svn】设置过滤文件
- 系统syslog网络转发配置
- python打印9宫格,25宫格等奇数格,且横竖斜相加和相等
- win10如何微信多开(无需工具)
- JAVA模板模式,简历模板(例子)
- python读取Himawari8数据
- 一键批量PDF转换成图片文件
- MFC对话框动态背景(定时器)
- 区块链:重塑经济与世界
- win10开机未能正确启动_设置华硕电脑定时开机只需两步!
- Golang单元测试快速上手(三) 高级技巧
- 将要加入linux-2.6.29内核的cred
- maven项目中报错 could not find class that it depends on找不到依赖的问题
- Unicode汉字编码表以及参考源码分享
- Linux安装防火墙
- 【设计模式 一】实战节日商品打折之策略模式