Nginx解决转发地址时跨域的问题

一、什么是跨域问题

在一个服务器A里放置了json文件，另一个服务器B想向A发送ajax请求，获取此文件，会发生错误。

Chrome提示：

XMLHttpRequest cannot load ******. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

这就是跨域问题。解决方案有不少，比较好的是服务器端配置CORS，但要求服务器端做更改。如果在不需要更改服务器端的情况下解决呢？尤其是需要在本地测试的时候。

二、配置Nginx

打开nginx目录下的conf文件夹。打开nginx.conf，将其中的http请求修改为：

http {
  include mime.types;
  server {
    listen    80;
    server_name localhost;
    charset UTF-8;

  location / {
    root html;
    index index.html index.htm;
  }

    # Avoid CORS and reverse proxy settings
    location /api/ { # [2]
      proxy_http_version 1.1;
      proxy_pass http://www.des.com/; # [3]

      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
      add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
      add_header Access-Control-Allow-Credentials true;
    }
  }
}

注意粗体字的部分，/api/表示当请求api目录时，转向http://www.des.com/域名。

例如，请求：

http://127.0.0.1/api/ 就会转向 http://www.des.com/

http://127.0.0.1/api/aaa/bbb/ 就会转向 http://www.des.com/aaa/bbb/

这种由服务器转发的请求，可以突破跨域的限制，因此ajax也可以正常工作。

注意： /api/ 不行写成 /api。

http://www.des.com/ 也不能写成 http://www.des.com

三、配置hosts

为了在本机测试看起来更像在目标服务器上测试，可以设置系统的hosts文件。

每个系统（windows、Linux、Mac OS）都有hosts文件，它是本地的域名解析器。

通常，我们请求一个域名，如www.baidu.com，首先要向域名服务器请求百度的IP地址，然后再根据IP地址来访问。

也可以不需要咨询域名服务器，直接在本地的hosts键入百度的IP地址。

例如

252.192.0.15 www.baidu.com

这样，系统会先从hosts文件里搜索IP地址。

Windows下的hosts文件位于：C:\Windows\System32\drivers\etc

打开后，添加

127.0.0.1 www.des.com

则，每次访问www.des.com，就会链接到本地。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • nginx支持tcp转发的配置分享

    这个其实很简单,直接加一个模块就可以了,不过这个不自带,需要自己安装: -prefix=/usr/local/nginx –with-pcre=/home/soft/pcre-8.30 –with-openssl=/home/soft/openssl-1.0.2g –add-module=../nginx_tcp_proxy_module-master 如果安装中出现: configure: error: zlib library not found 直接yum安装即可. yum install

  • nginx反向代理用做内网域名转发

    由于公司内网有多台服务器的http服务要映射到公司外网静态IP,如果用路由的端口映射来做,就只能一台内网服务器的80端口映射到外网80端口,其他服务器的80端口只能映射到外网的非80端口.非80端口的映射在访问的时候要域名加上端口,比较麻烦.并且公司入口路由最多只能做20个端口映射. 肯定以后不够用. 然后发现可以在内网搭建一个nginx反向代理服务器,将nginx反向代理服务器的80映射到外网IP的80,这样指向到公司外网IP的域名的HTTP请求就会发送到nginx反向代理服务器,利用ngin

  • Nginx服务器作反向代理实现内部局域网的url转发配置

    情景 由于公司内网有多台服务器的http服务要映射到公司外网静态IP,如果用路由的端口映射来做,就只能一台内网服务器的80端口映射到外网80端口,其他服务器的80端口只能映射到外网的非80端口.非80端口的映射在访问的时候要域名加上端口,比较麻烦.并且公司入口路由最多只能做20个端口映射.肯定以后不够用. 然后k兄就提议可以在内网搭建个nginx反向代理服务器,将nginx反向代理服务器的80映射到外网IP的80,这样指向到公司外网IP的域名的HTTP请求就会发送到nginx反向代理服务器,利用

  • Nginx服务器中配置非80端口的端口转发方法详解

    Nginx服务器中配置非80端口的端口转发方法详解

    nginx可以很方便的配置成反向代理服务器: server { listen 80; server_name localhost; location / { proxy_pass http://x.x.x.x:9500; proxy_set_header Host $host:80; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy

  • 在Nginx服务器中配置针对TCP的负载均衡的方法

    在Nginx服务器中配置针对TCP的负载均衡的方法

    默认nginx不支持tcp的负载均衡,需要打补丁,(连接方式:从客户端收到一个连接,将从本地新建一个连接发起到后端服务器),具体配置如下: 一.安装Nginx 1.下载nginx # wget http://nginx.org/download/nginx-1.2.4.tar.gz 2.下载tcp模块补丁 # wget https://github.com/yaoweibin/nginx_tcp_proxy_module/tarball/master 源码主页: https://github.c

  • nginx搭建tcp代理服务器

    nginx不仅可以是http代理服务器,也可以轻松搭建成tcp代理服务器. 首先我们看下最新开发版的搭建方法 1. 安装 > wget http://nginx.org/download/nginx-1.9.0.tar.gz > tar zxvf nginx-1.9.0.tar.gz 版本要求 1.9.0+ 2.配置 worker_processes auto; error_log /var/log/nginx/error.log info; stream { upstream backend

  • nginx基于tcp做负载均衡的方法

    配置多台服务器时,经常需要让各个服务器之间的时间保持同步,如果服务器有外网环境,可以直接同外部的时间服务器更新时间,可以采用rdate命令更新时间: rdate -s tick.greyware.com 可以写个脚本放在/etc/cron.hourly中每小时校正一下时间. 如果是内网环境下,可以自己配置一个时间服务器,以CentOS为例,配置时间服务器的方法如下: 1.先安装xinetd : sudo yum install -y xinetd 2.修改/etc/xinetd.d/time-

  • Nginx解决转发地址时跨域的问题

    一.什么是跨域问题 在一个服务器A里放置了json文件,另一个服务器B想向A发送ajax请求,获取此文件,会发生错误. Chrome提示: XMLHttpRequest cannot load ******. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 这就是跨域问题.解决方案有不少,比较好的

  • Nginx解决前端访问资源跨域问题的方法详解

    Nginx解决前端访问资源跨域问题的方法详解

    被前端跨域问题折磨快2天后,终于用ngnx的方式解决了,所以在此总结下. 该篇只探讨如何用Ngnx解决跨域问题,对于原理不作讨论. 1.首先介绍Windows环境下Nignx的相关命令操作 nginx常用命令: 验证配置是否正确: nginx -t 查看Nginx的版本号:nginx -V 启动Nginx:start nginx 快速停止或关闭Nginx:nginx -s stop 正常停止或关闭Nginx:nginx -s quit 配置文件修改重装载命令:nginx -s reload 在停

  • 通过Nginx代理转发配置实现跨域的方法（API代理转发）

    通过Nginx代理转发配置实现跨域的方法（API代理转发）

    前言 在WEB开发中,我们经常涉及到跨域的请求,解决跨域问题的方式有很多,比如有window.name.iframe.JSONP.CORS等等,就不详细展开了,涉及到 协议.端口 不一样的跨域请求方式是采用代理,这里我们重点聊聊Nginx代理的方式. 场景 本地启动了一个前后端分离的WEB应用,端口为:3000,可以通过http://127.0.0.1:3000访问前端页面,页面中有些Ajax请求的地址为http://127.0.0.1:3000/api/getList,一般情况下肯定是404或

  • Node.js配合node-http-proxy解决本地开发ajax跨域问题

    Node.js配合node-http-proxy解决本地开发ajax跨域问题

    情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. CORS跨域:后端接口在返回的时候,在header中加入'Access-Control-Allow-origin':* 之类的(有的时候后端不方便这样处理,前端就蛋疼了) 3. 用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,完美解决本地开发时候的跨域问题.  用到的技术:

  • 解决Vue+SpringBoot+Shiro跨域问题

    解决Vue+SpringBoot+Shiro跨域问题

    相信大家刚开始做都会遇到这个问题,在网上找了好多也不管用,都写的不全, 在这里记录一下,希望对大家有所帮助 一.配置Vue前端 在config下index.js中配置代理信息 注意:这里的跨域配置只在开发环境中有效,打包部署后,这个跨域就不起作用了,本人也是这里卡了好久,Vue前端打包后,最好部署到nginx上,用nginx可以直接解决跨域问题 1.开发跨域配置 proxyTable: { '/api': { target: 'http://xxxx.com', //地址 changeOrigi

  • 快速解决Canvas.toDataURL 图片跨域的问题

    如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题: [Redirect at origin 'http://sub1.xx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested res

  • Spring Boot 如何解决富文本上传图片跨域问题

    目录 Spring Boot 解决富文本上传图片跨域 创建一个WebMvcConfig类 创建一个Filter类,做页面跨域的处理 springboot文件上传跨域 前端 后端 Spring Boot 解决富文本上传图片跨域 在前后端分离的情况下,后台所写的接口在前端调用的时候,可能前端浏览器已经读取到了数据,但是在前端代码ajax请求的时候,请求回调里会出现页面跨域的控制台打印错误,这个时候只需要后台配置一下头部请求就可以解决 我用的是SpringBoot,讲解一下如何配置SpringBoot

  • 使用HTML5中postMessage知识点解决Ajax中POST跨域问题

    使用HTML5中postMessage知识点解决Ajax中POST跨域问题

    由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等.常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建script: (3) iframe+location.hash: (4) flash. postMessage是HTML5为解决js跨域问题而引入的新的API,允许多个iframe/window跨域通信. HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口

  • 完美解决api、WebService跨域的问题

    完美解决api、WebService跨域的问题

    webapi接口在ajax调用的很多情况下都会出现跨域问题,同样的WebService如果想用ajax调用,也需要接口跨域问题,解决方案如下: 1.IIS配置 打开IIS选择发布后的webapi或者是WebService,选择网站-->选择HTTP 响应表头-->添加..操作如下: 需要添加的名称和值为 <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/> &l

  • 已解决：No 'Access-Control-Allow-Origin'跨域问题

    问题分析: 这是常见的跨域请求问题,在前后端分离的项目中常见,前端项目中的请求路径直接用后台请求路径(例如:http://192.168.1.1:8080/demo/getUser.do),但根据浏览器的网络请求规则,后台Server是不允许这样直接调用的(会被当黑客恶意攻击给拦截掉).从而导致该跨域请求被拒绝(如下图). Access to XMLHttpRequest at 'http://192.168.1.1:8080/app/easypoi/importExcelFile' from

随机推荐