nginx 配置跨域失效修复的方法示例

nginx 配置跨域不生效 如下配置

server {
  listen  80;
  server_name localhost;

  # 接口转发
  location /api/ {
   # 允许请求地址跨域 * 做为通配符
   add_header 'Access-Control-Allow-Origin' '*';
   # 设置请求方法跨域
   add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
   # 设置是否允许 cookie 传输
   add_header 'Access-Control-Allow-Credentials' 'true';
   # 设置请求头 这里为什么不设置通配符 * 因为不支持
   add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';
   # 设置反向代理
   proxy_pass 127.0.0.1:8081/;
  }
 }

网上的 nginx 跨域配置主要是以上版本，然而很多都是抄一抄，并没有真的去实践，故写了下文章提醒下有需要的人，不要盲目抄，学会分析。

nginx 修改如下配置后生效

server {
  listen  80;
  server_name localhost;

  # 接口转发
  location /api/ {
   # 允许请求地址跨域 * 做为通配符
   add_header 'Access-Control-Allow-Origin' '*';
   # 设置请求方法跨域
   add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
   # 设置是否允许 cookie 传输
   add_header 'Access-Control-Allow-Credentials' 'true';
   # 设置请求头 这里为什么不设置通配符 * 因为不支持
   add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';

   # 设置 options 请求处理
   if ( $request_method = 'OPTIONS' ) {
    return 200;
   }
   # 设置反向代理
   proxy_pass 127.0.0.1:8081/;
  }
 }

两者代码区别 主要就是下面这行代码

if ( $request_method = 'OPTIONS' ) {
  return 200;
}

因为 post 请求 浏览器会发送一个 options 的预检请求，主要将本次的请求头 发送给服务端，若服务端允许，再发送真正的post请求，所以 f12 看到，经常 post 会发送两次请求。因为后端 java 代码没有对 options 请求做出处理，导致 options 接口请求的时候，报 403 forbidden , 这里 nginx 对 options 的请求直接返回 200，不用到达接口层，直接允许 post 响应头，即可使得上述失效配置能够生效

附赠 一个小知识点

proxy_pass 127.0.0.1:8081/;

针对反向代理里面这个/ 加不加的问题；

访问 http://localhost/api/user/login;

  • 加/ 则 实际访问的是 127.0.0.1:8081/user/login;
  • 不加 / 则实际访问的是 127.0.0.1:8081/api/user/login;

加了斜杠意味着所有的 /api 请求都会转发到根目录下，也就是说 /api 会被 / 替代，这个时候接口路径就变了，少了一层 /api 。而不加斜杠的时候呢？这代表着转发到127.0.0.1:8081的域名下， /api 的路径不会丢失

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Nginx服务器中处理AJAX跨域请求的配置方法讲解

    Nginx服务器中处理AJAX跨域请求的配置方法讲解

    Nginx 实现AJAX跨域请求 AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令.如下所示: location /{ add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com'; add_header 'Access-Control-Allow-Credentials' 'true

  • Nginx实现跨域使用字体文件的配置详解

    本文主要给大家介绍了关于Nginx跨域使用字体文件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 问题描述 今天在使用子域名访问根域名的CSS时,发现字体无法显示,在确保CSS和Font字体的路径加载无问题后,基本确定是因为跨域的问题. 通过Nginx模块Http_Headers_Module来添加Access-Control-Allow-Origin允许的地址 console报错信息 ccess to Font at 'http://w001.static.akhack.com

  • nginx服务器通过配置来解决API的跨域问题

    前言 最近在采用jquery ajax调用http请求时,发现了一系列问题: 如采用firebug调试API请求(这个API是自己服务器的应用),看到服务器明明返回200状态,response返回数据也是json格式,但ajax返回的error. 在排除json数据格式不正确的原因之后,发现了ajax error函数返回"networkerror failed to execute 'send' on 'xmlhttprequest' failed to load 'http //"

  • Nginx跨域使用字体文件的配置方法

    今天在使用子域名访问根域名的CSS时,发现字体无法显示,在确保CSS和Font字体的路径加载无问题后,基本确定是因为跨域的问题. 通过Nginx模块HttpHeadersModule来添加Access-Control-Allow-Origin允许的地址. 解决方法 在Nginx的conf目录下修改nginx.conf或者vhost下对应的domain conf,添加以下代码: 复制代码 代码如下: location ~* \.(eot|ttf|woff)$ {add_header Access-

  • 通过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或

  • 详解Nginx反向代理跨域基本配置与常见误区

    详解Nginx反向代理跨域基本配置与常见误区

    跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访问,其实是浏览器的限制.理解这一点很重要!!! 最近公司前后端分离,前端独立提供页面和静态服务很自然的就想到了用nginx去做静态服务器.同时由于跨域了,就想利用nginx的反向代理去处理一下跨域,但是在解决问题的同时,发现网上有些方案的确是存在一些问题,在这里总结一下基本配置,也聊一下常见的配置问题. Ng

  • nginx服务器配置解决ajax的跨域问题

    在采用jquery ajax调用http请求时,发现了一系列问题: 如采用firebug调试API请求(这个API是自己服务器的应用),看到服务器明明返回200状态,response返回数据也是json格式,但ajax返回的error. 在排除json数据格式不正确的原因之后,发现了ajax error函数返回"networkerror failed to execute 'send' on 'xmlhttprequest' failed to load 'http //" XMLHt

  • Nginx配置跨域请求Access-Control-Allow-Origin * 详解

    前言 当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服务器配置响应的header参数: 一. 解决方案 只需要在Nginx的配置文件中配置以下参数: location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET

  • Nginx跨域访问场景配置和防盗链详解

    Nginx跨域访问场景配置和防盗链详解

    跨域访问控制 跨域访问 为什么浏览器禁止跨域访问 不安全,容易出现CSRF攻击! 如果黑客控制的网站B在响应头里添加了让客户端去访问网站A的恶意信息,就会出现CSRF攻击 Nginx如何配置跨域访问 add_header语法 Syntax:add_header name value [always]; Default:- Context:http, server, location, if in location 语法解释: add_header name value [always]; nam

  • nginx 配置跨域失效修复的方法示例

    nginx 配置跨域不生效 如下配置 server { listen 80; server_name localhost; # 接口转发 location /api/ { # 允许请求地址跨域 * 做为通配符 add_header 'Access-Control-Allow-Origin' '*'; # 设置请求方法跨域 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE'; # 设置是否允许 co

  • vue-cli 3.x配置跨域代理的实现方法

    写在前面 vue-cli 3.x 的beta版本已经发布了一段时间,很早就像体验一番一直找不到时间.这些日子刚好有空就想着依照网上的一些例子练下手,刚一上手就踩到坑了. 3.x 版本对整个项目的构建都有很大的改动,项目的默认配置整个都转移到CLI service里去了,从而所有的配置文件在初始化的项目中并没有生成.初次生成项目的时候可谓是完全懵的,无论是baidu还是google,对于3.x的介绍几乎就没有,仅有的一些也只是项目的一些生成流程,那怎么办,只能靠自己瞎整了. 既然没有现成的(作为一

  • 关于iframe跨域POST提交的方法示例

    前言 以前在面试的时候经常遇到问关于跨域的事儿,所以自己对跨域有一定的概念性了解,知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使iframe跨域进行POST提交的实际案例,我才明白具体如何使用iframe进行跨域操作. 说到跨域,就不得不提起浏览器的同源策略. 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互. 源 如果协议,端口(如果指定了一个)和主机对于两个页面是相同的,那么这两个页面就具有相同的源. 从这个定义可以看

  • webapi跨域使用session的方法示例

    在之前的项目中,我们设置跨域都是直接在web.config中设置的. 这样是可以实现跨域访问的.因为我们这边一般情况下一个webapi会有多个网站.小程序.微信公众号等访问,所以这样设置是没有问题的.但是--如果其中一个网站需要用到cookie或者session的时候, Access-Control-Allow-Origin如果还是设置成"*"就会报错,当然是前端报错...数据返回还有cookie/session都还是能存,但是报错就不爽了啊. 于是,想着整改一下. 先上前端代码.来个

  • Django跨域请求CSRF的方法示例

    web跨域请求 1.为什么要有跨域限制 举个例子: 1.用户登录了自己的银行页面 http://mybank.com,http://mybank.com向用户的cookie中添加用户标识. 2.用户浏览了恶意页面 http://evil.com.执行了页面中的恶意AJAX请求代码. 3.http://evil.com向http://mybank.com发起AJAX HTTP请求,请求会默认把http://mybank.com对应cookie也同时发送过去. 4.银行页面从发送的cookie中提取

  • vue开发环境配置跨域的方法步骤

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问 production:产品 生产环境 development:开发 开发环境 1.开发环境设置跨域使用工具: vue-cli自带的配置配置 目录 /config/index.js //自行复制黏贴 proxyTable: { '/apis':{ target: 'http://10.1.63.26:19080/', // 后台api changeOrigin: true, //是否跨域 // s

  • nginx解决跨域问题的实例方法

    前后端分离,使用nginx解决跨域问题 前端:vue.js+nodejs+webpack 后台:SpringBoot 反向代理服务器:nginx 思想:将前端代码打包,让nginx指向静态资源,nginx对后台请求进行转发. 1.将前端代码打包: npm run build 会生成一个dist文件夹.包含一个index.html文件和一个static文件夹,路径以我本地为例: /Users/xxx/ideaProjects/webtest/dist 2.打开 /usr/local/etc/ngi

  • Vue项目配置跨域访问和代理proxy设置方式

    在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

  • Python中flask框架跨域问题的解决方法

    Python中flask框架跨域问题的解决方法

    目录 一.跨域是什么 二.如何解决跨域问题 总结 一.跨域是什么 从一个域名去请求另一个域名,这个过程称之为跨域.浏览器从一个域名的网页去请求另一个域名的资源,域名.端口.协议有一个不一样,请求都属于跨域.跨域其实是浏览器的一个保护政策. 网页上有ajax请求时,会报:No 'Access-Control-Allow-Origin' header is present on the requested '这个错误. 二.如何解决跨域问题 1.跨域请求的过程 因此我们只要做到请求头部信息一致即可.

随机推荐