Nginx 轻松搞定跨域问题

news2024/11/17 16:19:50

图片

当你遇到跨域问题，不要立刻就选择复制去尝试，请详细看完这篇文章再处理，我相信它能帮到你。

分析前准备：

前端网站地址：http://localhost:8080

服务端网址：http://localhost:59200

首先保证服务端是没有处理跨域的，其次，先用postman测试服务端接口是正常的

图片

当网站8080去访问服务端接口时，就产生了跨域问题，那么如何解决？接下来我把跨域遇到的各种情况都列举出来并通过nginx代理的方式解决（后台也是一样的，只要你理解的原理）。

跨域主要涉及4个响应头：

  • Access-Control-Allow-Origin 用于设置允许跨域请求源地址 （预检请求和正式请求在跨域时候都会验证）

  • Access-Control-Allow-Headers 跨域允许携带的特殊头信息字段 （只在预检请求验证）

  • Access-Control-Allow-Methods 跨域允许的请求方法或者说HTTP动词 （只在预检请求验证）

  • Access-Control-Allow-Credentials 是否允许跨域使用cookies，如果要跨域使用cookies，可以添加上此请求响应头，值设为true（设置或者不设置，都不会影响请求发送，只会影响在跨域时候是否要携带cookies，但是如果设置，预检请求和正式请求都需要设置）。不过不建议跨域使用（项目中用到过，不过不稳定，有些浏览器带不过去），除非必要，因为有很多方案可以代替。

网上很多文章都是告诉你直接Nginx添加这几个响应头信息就能解决跨域，当然大部分情况是能解决，但是我相信还是有很多情况，明明配置上了，也同样会报跨域问题。

什么是预检请求？

当发生跨域条件时候，览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。如下图

图片

开始动手模拟：

Nginx代理端口：22222 ,配置如下

server {
    listen       22222;
    server_name  localhost;
    location  / {
        proxy_pass  http://localhost:59200;
    }
}

测试代理是否成功，通过Nginx代理端口2222再次访问接口，可以看到如下图通过代理后接口也是能正常访问

图片

接下来开始用网站8080访问Nginx代理后的接口地址，报错情况如下↓↓↓

情况1：

Access to XMLHttpRequest at ‘http://localhost:22222/api/Login/TestGet’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

通过错误信息可以很清晰的定位到错误（注意看标红部分）priflight说明是个预请求，CORS 机制跨域会首先进行 preflight（一个 OPTIONS 请求）， 该请求成功后才会发送真正的请求。这一设计旨在确保服务器对 CORS 标准知情，以保护不支持 CORS 的旧服务器

通过错误信息，我们可以得到是预检请求的请求响应头缺少了 Access-Control-Allow-Origin，错哪里，我们改哪里就好了。修改Nginx配置信息如下（红色部分为添加部分），缺什么就补什么，很简单明了

server {
    listen       22222;
    server_name  localhost;
    location  / {
       add_header Access-Control-Allow-Origin 'http://localhost:8080';
       proxy_pass  http://localhost:59200;
    }
}

哈哈，当满怀欢喜的以为能解决后，发现还是报了同样的问题

不过我们的配置没什么问题,问题在Nginx,下图链接http://nginx.org/en/docs/http/ngx_http_headers_module.html

add_header 指令用于添加返回头字段，当且仅当状态码为图中列出的那些时有效。如果想要每次响应信息都携带头字段信息，需要在最后添加always（经我测试，只有Access-Control-Allow-Origin这个头信息需要加always，其他的不加always也会携带回来），那我们加上试试

server {
    listen       22222;
    server_name  localhost;
    location  / {
       add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
       proxy_pass  http://localhost:59200;
    }
}

修改了配置后，发现生效了，当然不是跨域就解决了，是上面这个问题已经解决了，因为报错内容已经变了。

情况2：

Access to XMLHttpRequest at ‘http://localhost:22222/api/Login/TestGet’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

图片

通过报错信息提示可以得知，是跨域浏览器默认行为的预请求（option请求）没有收到ok状态码，此时再修改配置文件，当请求为option请求时候，给浏览器返回一个状态码（一般是204）

server {
    listen       22222;
    server_name  localhost;
    location  / {
       add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
       if ($request_method = 'OPTIONS') {
            return 204;
       }
       proxy_pass  http://localhost:59200;
    }
}

当配置完后，发现报错信息变了

情况3：

Access to XMLHttpRequest at ‘http://localhost:22222/api/Login/TestGet’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

图片

意思就是预请求响应头Access-Control-Allow-Headers中缺少头信息authorization（各种情况会不一样，在发生跨域后，在自定义添加的头信息是不允许的，需要添加到请求响应头Access-Control-Allow-Headers中，以便浏览器知道此头信息的携带是服务器承认合法的，我这里携带的是authorization，其他的可能是token之类的，缺什么加什么），知道了问题所在，然后修改配置文件，添加对应缺少的部分，再试试

server {
    listen       22222;
    server_name  localhost;
    location  / {
       add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
       if ($request_method = 'OPTIONS') {
           add_header Access-Control-Allow-Headers 'authorization'; #为什么写在if里面而不是接着Access-Control-Allow-Origin往下写？因为这里只有预检请求才会检查
           return 204;
      }
    proxy_pass http://localhost:59200;
}
}

此时发现报错问题又回到了情况1

图片

经测试验证，只要if ($request_method = ‘OPTIONS’) 里面写了 add_header ，当为预检请求时外部配置的都会失效，为什么？↓↓。

官方文档是这样说的：

There could be several add_header directives. These directives are inherited from the previous level if and only if there are no add_header directives defined on the current level.

意思就是当前层级无 add_header 指令时，则继承上一层级的add_header。相反的若当前层级有了add_header，就应该无法继承上一层的add_header。

图片

配置修改如下：

server {
    listen       22222;
    server_name  localhost;
    location  / {
        add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080';
            add_header Access-Control-Allow-Headers 'authorization';
            return 204;
        }
        proxy_pass  http://localhost:59200;
    }
}

此时改完发现跨域问题已经解决了，

不过以上虽然解决了跨域问题，但是考虑后期可能Nginx版本更新,不知道这个规则会不会被修改，考虑到这样的写法可能会携带上两个 Access-Control-Allow-Origin ，这种情况也是不允许的，下面会说到。所以配置适当修改如下：

server {
    listen       22222;
    server_name  localhost;
    location  / {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080';
            add_header Access-Control-Allow-Headers 'authorization';
            return 204;
        }
        if ($request_method != 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
        }
        proxy_pass  http://localhost:59200;
    }
}

还没完，继续聊 ↓↓

情况4：

比较早期的API可能只用到了POST和GET请求，而Access-Control-Allow-Methods这个请求响应头跨域默认只支持POST和GET，当出现其他请求类型时候，同样会出现跨域异常。

比如，我这里将请求的API接口请求方式从原来的GET改成PUT，在发起一次试试。在控制台上会抛出错误：

Access to XMLHttpRequest at ‘http://localhost:22222/api/Login/TestGet’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

图片

报错内容也讲的很清楚，在这个预请求中，PUT方法是不允许在跨域中使用的，我们需要改下Access-Control-Allow-Methods的配置(缺什么加上么，这里我只加了PUT，可以自己加全一点)，让浏览器知道服务端是允许的

server {
    listen 22222;
    server_name localhost;
    location / {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080';
            add_header Access-Control-Allow-Headers 'content-type,authorization';
            add_header Access-Control-Allow-Methods 'PUT';#为这么只加在这个if中，不再下面的if也加上？因为这里只有预检请求会校验，当然你加上也没事。
            return 204;
        }
        if ($request_method != 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
        }
        proxy_pass http://localhost:59200;
    }
}

这里注意一下，改成PUT类型后，Access-Control-Allow-Headers请求响应头又会自动校验content-type这个请求头，和情况3是一样的，缺啥补啥就行了。如果不加上content-type，则会报如下错误。（想简单的话，Access-Control-Allow-Headers和Access-Control-Allow-Methods可以设置为 * ,表示全都匹配。但是Access-Control-Allow-Origin就不建议设置成 * 了，为了安全考虑，限制域名是很有必要的。）

图片

都加上后，问题就解决了，这里报405是我服务端这个接口只开放了GET，没有开放PUT，而此刻我将此接口用PUT方法去请求，所以接口会返回这个状态码。

图片

情况5：

最后再说一种情况，就是后端处理了跨域，就不需要自己在处理了（这里吐槽下，某些后端工程师自己改服务端代码解决跨域，但是又不理解其中原理，网上随便找段代码黏贴，导致响应信息可能处理不完全，如method没添加全，headers没加到点上，自己用的那个可能复制过来的并不包含实际项目所用到的，没有添加options请求返回状态码等，导致Nginx再用通用的配置就会可能报以下异常）

Access to XMLHttpRequest at ‘http://localhost:22222/api/Login/TestGet’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘*, http://localhost:8080’, but only one is allowed.

图片

图片

意思就是此刻Access-Control-Allow-Origin请求响应头返回了多个，而只允许有一个，这种情况当然修改配置去掉Access-Control-Allow-Origin这个配置就可以了，不过遇到这种情况，建议Nginx配置和服务端自己解决跨域只选其一。（这里注意如果按我上面的写法，if $request_method = ‘OPTIONS’ 这个里面的Access-Control-Allow-Origin可不能删除，删除!='OPTIONS’里面的就好了，因为这里如果是预检请求直接就ruturn了，请求不会再转发到59200服务，如果也删除了，就会报和情况1一样的错误。所以为什么说要不服务端代码层面解决跨域，要不就Nginx代理解决，不要混着搞，不然不明白原理的人，网上找一段代码贴就很可能解决不了问题）

↓ ↓ ↓ ↓ ↓

再贴一份完整配置（*号根据自己‘喜好’填写）：

server {
    listen       22222;
    server_name  localhost;
    location  / {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080';
            add_header Access-Control-Allow-Headers '*';
            add_header Access-Control-Allow-Methods '*';
            add_header Access-Control-Allow-Credentials 'true';
            return 204;
        }
        if ($request_method != 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
            add_header Access-Control-Allow-Credentials 'true';
        }
        proxy_pass  http://localhost:59200;
    }
}

或者：

server {
    listen       22222;
    server_name  localhost;
    location  / {
        add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
        add_header Access-Control-Allow-Headers '*';
        add_header Access-Control-Allow-Methods '*';
        add_header Access-Control-Allow-Credentials 'true';
        if ($request_method = 'OPTIONS') {
            return 204;
        }
        proxy_pass  http://localhost:59200;
    }
}

最后，这是一篇解决跨域遇到问题解决问题的过程，如果认真看完了，我相信应该都能很容易的理解，并且在实际使用中自己解决该问题，希望能帮助到大家，以上内容都是自己理解自己测试码出来的，如有理解不对的地方，望大家指正。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/636819.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

微软将GitHub Copilot 与 Visual Studio 深度整合有助于便捷开发

微软将GitHub Copilot 与 Visual Studio 深度整合有助于便捷开发

近日对于很多的开发者来说将迎来一个好消息，据悉微软目前正在改善Visual Studio的开发体验，并将GitHub Copilot更深度融合入Visual Studio 中，以提升“AI 写代码”的准确性。 值得注意的是，在Copilot 1.84 版本之前，…
阅读更多...
亚马逊养号系统之亚马逊批量养号如何操作？

亚马逊养号系统之亚马逊批量养号如何操作？

亚马逊新注册的买家号都是需要先养一段时间才可以的，如果想要同时养大量的买家号那么需要借助软件进行辅助操作才行。 亚马逊鲲鹏系统可以批量养亚马逊买家号，养号方法有两种，一种是AI智能一键养号，一种是设置关键词搜索浏览后进行…
阅读更多...
编译 Keras 模型

编译 Keras 模型

本篇文章译自英文文档 Compile Keras Models 作者是 Yuwei Hu 更多 TVM 中文文档可访问 →TVM 中文站。 本文介绍如何用 Relay 部署 Keras 模型。 首先安装 Keras 和 TensorFlow，可通过 pip 快速安装： pip install -U keras --user pip install -U …
阅读更多...
代码随想录算法训练营第五十五天|392.判断子序列|115.不同的子序列

代码随想录算法训练营第五十五天|392.判断子序列|115.不同的子序列

LeetCode392.判断子序列 动态规划五部曲： 1，确定dp数组（dp table）以及下标的含义：dp[i][j] 表示以下标i-1为结尾的字符串s，和以下标j-1为结尾的字符串t，相同子序列的长度为dp[i][j]。注意这里…
阅读更多...
postman中级：导入文件数据，批量化参数

postman中级：导入文件数据，批量化参数

建议阅读对象：已掌握postman的基本使用（参见：postman入门-主界面认识，模拟请求） 本地安装的版本：Postman for Windows Version 10.14.9 1.创建csv文件 或 txt文件 文件数据格式： 第一行写下参…
阅读更多...
python生成excel文件的三种方式

python生成excel文件的三种方式

在我们做平常工作中都会遇到操作excel，那么今天写一篇，如何通过python操作excel。当然python操作excel的库有很多，比如pandas，xlwt/xlrd，openpyxl等，每个库都有不同的区别，具体的区别&#xff0…
阅读更多...
day19--栈

day19--栈

用两个栈实现队列 栈：先进后出；队列：先进先出>因此两个栈即可模拟队列 class Solution { public:void push(int node) {//进队stack1.push(node);//进栈}int pop() {//出队int t;if(stack2.empty()){//栈2空while(!stack1.empty()){//栈1…
阅读更多...
vue table页展示

vue table页展示

<template><el-container><el-header><el-tabsv-model"groupId"tab-click"tabChange"class"w-full pt-11 ml-5"><el-tab-panelabel"登记进度"name"0"></el-tab-pane><el-tab-panela…
阅读更多...
MarkDown使用教程

MarkDown使用教程

MarkDown使用教程 1.标题 #: 一级标题 ##: 二级标题 ###: 三级标题 一共分为六级 2.字体 斜体文本 斜体文本 粗体文本 粗体文本 粗斜体文本 粗斜体文本 3.列表 无序号的使用*、、- 作为列表的标记&#xff0c;这些标记后面添加一个空格 第一项第二项第三项 第一项第二项…
阅读更多...
ArcGIS如何统计面内点的数量

ArcGIS如何统计面内点的数量

本文来源&#xff1a;GIS科研实验室公众号 1 数据来介绍 本次教程使用的数据为&#xff1a;各小区的点坐标&#xff08;来源房天下&#xff0c;坐标为CGCS2000&#xff09;&#xff1b;基础教育设施、商业服务设施、金融保险设施、医疗卫生设施的POI坐标&#xff08;来源高德…
阅读更多...
java：找不到符号 符号：变量：log get set

java：找不到符号 符号：变量：log get set

问题&#xff1a;java&#xff1a;找不到符号&#xff1a;变量&#xff1a;log get set解决方法&#xff1a;在idea中&#xff0c;点击file-Settings&#xff0c;打开配置页面&#xff0c;如图红框位置&#xff0c;输入&#xff1a; -Djps.track.ap.dependenciesfalse
阅读更多...
pyecharts案例四——动态GDP柱状图绘制

pyecharts案例四——动态GDP柱状图绘制

思路 for循环每一年的数据&#xff0c;基于每一年的数据&#xff0c;创建每一年的Bar对象&#xff0c;并且将该对象添加到时间线timeline中&#xff0c;最后设置自动播放并绘图 实现代码 from pyecharts.charts import Bar, Timeline from pyecharts.options import * from …
阅读更多...
（7）自动调优

（7）自动调优

文章目录 前言 1 在自动调优模式下飞行前的设置 2 如何调用自动调优 3 在位置保持下调用自动调优 4 如果自动调优失败 5 补充说明 6 常见的问题 7 Dataflash日志记录 8 地面控制站消息 前言 AutoTune 试图自动调优稳定P&#xff0c;速率P和 D&#xff0c;以及最大旋转…
阅读更多...
交流（直流）电流采集方案

交流（直流）电流采集方案

芯片原理图 注意途中的绿色部分&#xff0c;说明此芯片可以采集交流或者直流 内部霍尔工作原理图 通过曲线可以确定再0A时输出电压为2.5v 只有随着电流的变化是大于2.5v或者小于2.5v&#xff08;交流负方向&#xff0c;或者直流负方向&#xff09; 下面是一个插排的拆解视频截…
阅读更多...
9. ThreadLocal

9. ThreadLocal

9.1 ThreadLocal简介 9.1.1 面试题 ● ThreadLocal中ThreadLocalMap的数据结构和关系 ● ThreadLocal的key是弱引用&#xff0c;这是为什么&#xff1f; ● ThreadLocal内存泄漏问题你知道吗&#xff1f; ● ThreadLocal中最后为什么要加remove方法&#xff1f; 9.1.2 是什么&a…
阅读更多...
KaiwuDB 受邀亮相山东省数字化转型论坛

KaiwuDB 受邀亮相山东省数字化转型论坛

4月21日&#xff0c;第十五届信博会暨中国&#xff08;济南&#xff09;数字经济高端峰会成功举办。KaiwuDB 受邀出席峰会重要论坛—山东省数字化转型论坛&#xff0c;并发表《工业物联网时代&#xff0c;数据库赋能企业数字化转型落地实践》主题演讲&#xff0c;与来自国内的 …
阅读更多...
Java动态代理：优化静态代理模式的灵活解决方案

Java动态代理：优化静态代理模式的灵活解决方案

文章目录 代理模式定义具体实现分析优缺点 优化使用动态代理解决优化相关知识动态代理种类场景应用 代理模式 定义 代理模式&#xff0c;为其他对象提供一种代理以控制对这个对象的访问 具体实现 代理模式的具体实现描述可以分为以下几个步骤&#xff1a; 创建抽象对象接…
阅读更多...
什么是Vue的JSX语法？如何使用JSX语法？

什么是Vue的JSX语法？如何使用JSX语法？

什么是Vue的JSX语法&#xff1f;如何使用JSX语法&#xff1f; 在Vue中&#xff0c;我们通常使用模板语法来编写组件的模板。但是&#xff0c;有些开发者更喜欢使用类似于React的JSX语法来编写组件。Vue也支持使用JSX语法来编写组件&#xff0c;本文将介绍什么是Vue的JSX语法以…
阅读更多...
企业级信息系统开发讲课笔记4.7 Spring Boot整合JPA

企业级信息系统开发讲课笔记4.7 Spring Boot整合JPA

文章目录 零、学习目标一、Spring Data JPA概述1、Spring Data JPA简介2、Spring Data JPA基本使用3、使用Spring Data JPA进行数据操作的多种实现方式4、自定义Repository接口中的Transactional注解5、变更操作&#xff0c;要配合使用Query与Modify注解 二、Spring Boot整合JP…
阅读更多...
热门图表软件推荐，哪款更功能更强大？

热门图表软件推荐，哪款更功能更强大？

在如今的数据化时代&#xff0c;各种企业都需要有一套高效的报表制作工具。而图表是报表中最常用、也是最重要的一部分&#xff0c;因此选择一款优秀的图表软件显得尤为重要。本文将为大家介绍5款热门图表软件&#xff0c;并突出介绍VeryReport图表软件的优势。 1. VeryReport…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023