这个答案涵盖了很多领域，所以它分为三个部分:

如何使用CORS代理来避免“无访问控制-允许起源头”问题 如何避免飞行前的CORS 如何修复“Access-Control-Allow-Origin头必须不是通配符”的问题

---

如何使用CORS代理来避免“无访问控制-允许起源头”问题

如果您不控制前端代码发送请求的服务器，并且来自该服务器的响应的问题只是缺乏必要的Access-Control-Allow-Origin报头，那么您仍然可以通过CORS代理发出请求来使事情正常工作。

您可以使用https://github.com/Rob--W/cors-anywhere/中的代码轻松运行自己的代理。 您还可以轻松地部署自己的代理到Heroku，只需2-3分钟，只需5个命令:

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

运行这些命令后，您将拥有自己的CORS Anywhere服务器，例如，https://cryptic-headland-94862.herokuapp.com/。

现在，用代理的URL作为请求URL的前缀:

https://cryptic-headland-94862.herokuapp.com/https://example.com

添加代理URL作为前缀会导致请求通过您的代理发出，这是:

将请求转发到https://example.com。 接收来自https://example.com的响应。 向响应添加Access-Control-Allow-Origin标头。 将该响应以及添加的报头传递回请求前端代码。

然后浏览器允许前端代码访问响应，因为带有access - control - allow - origin响应头的响应是浏览器所看到的。

即使请求是触发浏览器执行CORS preflight OPTIONS请求的请求，这也可以工作，因为在这种情况下，代理还会发送Access-Control-Allow-Headers和Access-Control-Allow-Methods报头，以使preflight成功。

---

如何避免飞行前的CORS

问题中的代码触发了CORS预飞行——因为它发送了一个授权报头。

https://developer.mozilla.org/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

即使没有，Content-Type: application/json头也会触发preflight。

“preflight”的意思是:在浏览器尝试问题中的代码中的POST之前，它首先向服务器发送一个OPTIONS请求，以确定服务器是否选择接收一个具有授权和Content-Type: application/json头的跨源POST。

它用一个小的curl脚本工作得很好-我得到了我的数据。

为了正确地测试curl，你必须模拟浏览器发送的preflight OPTIONS:

curl -i -X OPTIONS -H "Origin: http://127.0.0.1:3000" \
    -H 'Access-Control-Request-Method: POST' \
    -H 'Access-Control-Request-Headers: Content-Type, Authorization' \
    "https://the.sign_in.url"

将https://the.sign_in.url替换为实际的sign_in URL。

浏览器从OPTIONS请求中需要的响应必须有这样的头:

Access-Control-Allow-Origin:  http://127.0.0.1:3000
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type, Authorization

如果OPTIONS响应不包括这些头，浏览器将立即停止，并且永远不会尝试发送POST请求。另外，响应的HTTP状态代码必须是2xx—通常是200或204。如果是其他状态码，浏览器就会立即停止。

问题中的服务器用501状态代码响应OPTIONS请求，这显然意味着它试图表明它不支持OPTIONS请求。在这种情况下，其他服务器通常使用405“Method not allowed”状态代码进行响应。

因此，如果服务器对OPTIONS请求的响应是405或501，而不是200或204，或者没有响应必要的响应头，那么您将永远无法从前端JavaScript代码直接向该服务器发出POST请求。

避免在问题中触发预飞行的方法是:

如果服务器不需要授权请求头，而是依赖于POST请求体中嵌入的身份验证数据或作为查询参数 如果服务器不要求POST体具有Content-Type: application/json媒体类型，而是接受POST体为application/x-www-form-urlencoded，带有一个名为json(或其他什么)的参数，其值为json数据

---

如何修复“Access-Control-Allow-Origin头必须不是通配符”的问题

我得到另一个错误消息: 响应中的'Access-Control-Allow-Origin'报头的值 当请求的凭据模式为时，一定不能是通配符'*' “包括”。因此，来源“http://127.0.0.1:3000”是不允许的 访问。对象发起的请求的凭据模式 XMLHttpRequest由withCredentials属性控制。

对于具有凭据的请求，如果access - control - allow - origin报头的值为*，浏览器将不允许前端JavaScript代码访问响应。相反，这种情况下的值必须完全匹配前端代码的起源http://127.0.0.1:3000。

请参阅MDN HTTP访问控制(CORS)文章中的凭据请求和通配符。

如果你控制你要发送请求的服务器，处理这种情况的常见方法是配置服务器以获取Origin请求头的值，并将其回显/反射回Access-Control-Allow-Origin响应头的值;例如，使用nginx:

add_header Access-Control-Allow-Origin $http_origin

但这只是一个例子;其他(web)服务器系统也有类似的方法来回显原始值。

---

我正在使用Chrome浏览器。我也尝试使用Chrome CORS插件

Chrome CORS插件显然只是简单地在浏览器看到的响应中注入了一个Access-Control-Allow-Origin: *头。如果这个插件再聪明一点，它所做的就是将这个伪Access-Control-Allow-Origin响应头的值设置为前端JavaScript代码的实际原点http://127.0.0.1:3000。

所以避免使用该插件，即使是用于测试。只是为了分散注意力。要在没有浏览器过滤的情况下测试从服务器得到的响应，最好使用curl -H。

---

至于问题中fetch(…)请求的前端JavaScript代码:

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

去掉这些线条。Access-Control-Allow-*头是响应头。你绝对不想在请求中发送它们。这样做的唯一效果是触发浏览器进行预飞行。

当客户端URL和服务器URL(包括端口号)不匹配时，会发生此错误。在这种情况下，您需要启用跨源资源共享的CORS服务。

如果您正在托管Spring REST服务，那么您可以在Spring框架中的CORS支持的博客文章中找到它。

如果你使用Node.js服务器托管服务，那么

停止Node.js服务器。 NPM安装cors—保存 将以下行添加到server.js中

const cors=require("cors");
const corsOptions ={
   origin:'*', 
   credentials:true,            //access-control-allow-credentials:true
   optionSuccessStatus:200,
}

app.use(cors(corsOptions)) // Use this after the variable declaration

删除:

credentials: 'include',

使用dataType: 'jsonp'适合我。

   async function get_ajax_data(){
       var _reprojected_lat_lng = await $.ajax({
                                type: 'GET',
                                dataType: 'jsonp',
                                data: {},
                                url: _reprojection_url,
                                error: function (jqXHR, textStatus, errorThrown) {
                                    console.log(jqXHR)
                                },
                                success: function (data) {
                                    console.log(data);

                                    // note: data is already json type, you
                                    //       just specify dataType: jsonp
                                    return data;
                                }
                            });


 } // function               

出现问题是因为你在前端添加了以下代码作为请求头:

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

这些头属于响应，而不是请求。所以去掉它们，包括这一行:

headers.append('GET', 'POST', 'OPTIONS');

你的请求有“Content-Type: application/json”，因此触发了所谓的CORS preflight。这导致浏览器使用OPTIONS方法发送请求。详细信息请参见CORS飞行前准备。

因此，在你的后端，你必须通过返回响应头来处理这个预飞行的请求，其中包括:

Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, OPTIONS
Access-Control-Allow-Headers : Origin, Content-Type, Accept

当然，实际的语法取决于后端使用的编程语言。

在你的前端，它应该像这样:

function performSignIn() {
    let headers = new Headers();

    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    headers.append('Authorization', 'Basic ' + base64.encode(username + ":" +  password));
    headers.append('Origin','http://localhost:3000');

    fetch(sign_in, {
        mode: 'cors',
        credentials: 'include',
        method: 'POST',
        headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed: ' + error.message));
}

这只是我的个人意见……关于如何使用CORS代理来绕过“无访问控制-允许起源标头”问题

对于那些在后端使用php的人来说，部署“CORS代理”非常简单:

创建一个名为'no-cors.php'的文件，内容如下: $URL = $_GET[' URL ']; file_get_contents ($ URL)回波json_encode (); die (); 在前端，执行如下操作: fetch('https://example.com/no-cors.php' + '?Url =' + Url) 不要犹豫(反应= >{* /处理响应/ *})”

在我的例子中，web服务器阻止了“OPTIONS”方法

检查您的web服务器上的options方法

Apache: https://www ibm.com/support/docview.wss?uid=ibm10735209——01. web层:4.4.6禁用Options方法https://docs.oracle.com/cd/E23943_01/web.1111/e10144/getstart.htm#HSADM174 .单击“确定” nginx: https://medium.com/@hariomvashisth / cors-on-nginx-be38dd0e19df

我用的是webtier / www / webtier /域名(域名)/ config / fmwconfig /组件/羟基/ VCWeb1 / httpd . conf

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_METHOD} ^OPTIONS
  RewriteRule .* . [F]
</IfModule>

改变

<IfModule mod_rewrite.c>
  RewriteEngine off
  RewriteCond %{REQUEST_METHOD} ^OPTIONS
  RewriteRule .* . [F]
</IfModule>

在我的例子中，我使用下面的解决方案。

前端还是角

post(
    this.serverUrl, dataObjToPost,
    {
      headers: new HttpHeaders({
           'Content-Type':  'application/json',
         })
    }
)

后端(我使用PHP)

header("Access-Control-Allow-Origin: http://localhost:4200");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
print_r($request);

如果你在macOS的开发环境中使用Node.js和Express.js作为后端，React和Axios作为前端，你需要在HTTPS下运行两边。以下是最终对我有效的方法(经过几个小时的深入研究和测试):

步骤1:创建SSL证书

只需按照如何在5分钟内让HTTPS在本地开发环境中工作的步骤进行操作。

你最终会得到几个文件作为凭据来运行HTTPS服务器和React web:

server.key & server.crt

您需要在前端和后端的根文件夹中复制它们(在生产环境中，您可能会考虑在后端的./ssh文件夹中复制它们)。

步骤2:后端设置

我读了很多建议使用“cors”包甚至设置(“Access-Control-Allow-Origin”，“*”)的回答，这就像在说:“欢迎黑客来我的网站”。就像这样做:

import express from 'express';
const emailRouter = require('./routes/email');  // in my case, I was sending an email through a form in React
const fs = require('fs');
const https = require('https');

const app = express();
const port = 8000;

// CORS (Cross-Origin Resource Sharing) headers to support Cross-site HTTP requests
app.all('*', (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "https://localhost:3000");
    next();
});

// Routes definition
app.use('/email', emailRouter);

// HTTPS server
const credentials = {
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.crt')
};

const httpsServer = https.createServer(credentials, app);
httpsServer.listen(port, () => {
    console.log(`Back-end running on port ${port}`);
});

如果你想测试https是否正确，你可以用下面的常量替换httpserver:

https.createServer(credentials, (req: any, res: any) => {
  res.writeHead(200);
  res.end("hello world from SSL\n");
}).listen(port, () => {
  console.log(`HTTPS server listening on port ${port}...`);
});

然后从web浏览器https://localhost:8000/访问它

步骤3:前端设置

这是来自React前端的Axios请求:

    await axios.get(`https://localhost:8000/email/send`, {
        params: { /* Whatever data you want to send */ },
        headers: {
            'Content-Type': 'application/json',
        }
    })

现在，您需要使用我们已经创建的SSL凭据以HTTPS模式启动React web。在macOS终端中输入以下内容:

HTTPS=true SSL_CRT_FILE=server.crt SSL_KEY_FILE=server.key npm start

此时，您正在从前端端口3000的HTTPS连接发送请求，后端端口8000的HTTPS连接将接收该请求。CORS应该对此感到高兴;)

对于Node.js，如果你正在使用路由器，请确保在路由器之前添加CORS。否则，仍然会得到CORS错误。像下图:

const cors = require('cors');

const userRouter = require('./routers/user');

expressApp = express();
expressApp.use(cors());
expressApp.use(express.json());
expressApp.use(userRouter);

添加模式:no-cors可以避免API中的CORS问题。

fetch(sign_in, {
        mode: 'no-cors',
        credentials: 'include',
        method: 'POST',
        headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));
}

尝试在下面的代码中添加所有这些头文件，在每条路由之前，在你的应用程序中定义，而不是在路由之后

app.use((req, res, next) =>{
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers','Origin, X-Requested-With, Content-Type,Accept, Authortization');  
res.setHeader('Acces-Control-Allow-Methods','GET, POST, PATCH, DELETE');

如果您在部署React应用程序netlify时遇到此错误，请使用以下步骤。

步骤1:创建netlify。Toml文件在你的react应用程序的根文件夹。

步骤2:复制粘贴以下代码:

`[[redirects]]
    from = "/cors-proxy/*"
    to = ":splat"
    status = 200
    force = true`

步骤3:以这种方式更新fetch/axios API:

我花了一段时间才想明白。

使用下面的npm模块。这实际上挽救了生命。

https://www.npmjs.com/package/local-cors-proxy

您将得到一个CORS错误，例如下面的URL

https://www.google.co.in/search/list

在成功安装(local-cors-proxy)后，global npm install -g local-cors-proxy并设置代理URL。 例如，下面的CORS问题进入localhost。因此，需要为CORS问题域添加域名(https://www.google.co.in)和端口(——port 8010)。 欲了解更多，请查看链接 https://www.npmjs.com/package/local-cors-proxy

lcp --proxyUrl https://www.google.co.in --port 8010

设置成功后，它将生成如下所示的本地代理URL。

http://localhost:8010/proxy

在项目API URL中使用该域名。

API完整URL:

http://localhost:8010/proxy/search/list

在您的本地项目中获得CORS问题响应。

如果你的API是用ASP编写的。NET Core，然后请按照以下步骤:

安装Microsoft.AspNetCore.Cors包。 在Startup.cs文件的ConfigureServices方法中添加如下行: services.AddCors (); 在startup.cs文件的Configure方法中添加如下代码: app.UseCors(选项= > options.WithOrigins (http://localhost: 8080) .AllowAnyHeader () .AllowAnyMethod ()); 确保你在- app.UseRouting(); 参考下图(来自MSDN)查看中间件的顺序: https://i.stack.imgur.com/vQ4yT.png

CORS问题的可能原因

检查服务器端访问标头:参考此链接 在浏览器中检查从服务器接收到的请求头。下图显示了标题 如果您正在使用fetch方法并试图访问跨源请求，请确保mode:cors存在。请参阅此连结 有时如果程序中有问题，你也会得到CORS问题，所以确保你的代码正常工作。 确保在API中处理OPTION方法。

在过去的几年里，我遇到过几次这样的错误——似乎是在一个以前正常运行的网站上突然出现的。

我确定Chrome(可能还有其他浏览器)可以在服务器上发生一些不相关的错误时返回此错误，阻止它处理CORS请求(并且在返回HTTP 500错误之前)。

这些都发生在。net Core环境中，我不确定它是否会发生在其他环境中。

无论如何，如果您的代码以前运行过，并且看起来是正确的，那么在您疯狂地试图解决实际上并不存在的错误之前，请考虑调试以发现是否有其他错误正在触发。

对于Node.js和Express.js后端，我使用这个:)

App.use(函数(req, res, next) { res.header(“Access-Control-Allow-Origin”、“YOUR-DOMAIN.TLD”);//更新到匹配你将发出请求的域 res.header("Access-Control-Allow-Headers"， "Origin, x - request - with, Content-Type, Accept"); next (); })；

更多详情:CORS在ExpressJS

当客户端从他的主机username.companyname.com调用我们的后端服务时，他常常得到上述错误

有两件事是必须的:

在发送回响应时，发送键为Access-Control-Allow-Origin且值为*的报头: context.Writer.Header()["Access-Control-Allow-Origin"] = []string{"*"} //避免CORS错误 使用Go CORS库将AllowCredentials设置为false, AllowAllOrigins设置为true。

我犯过很多次这样的错误，正因为如此，我给大家列了一张“清单”。

Enable CORS on your project: If you're using Node.js (by example) you can use: npm install cors; import cors from 'cors'; app.use(cors()); You can manually set the headers like this (if you want it): app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authortization'); res.setHeader('Acces-Control-Allow-Methods', 'GET, POST, PATCH, DELETE'); Remember to add http:// to your API link in your frontend project, some browsers like Chrome do not accept a request using CORS if the request URL isn't HTTP or HTTPS: http://localhost:3000/api Check if your project is using a proxy.config.js file. See Fixing CORS errors with Angular CLI proxy.

在2021年12月，Chrome 97，授权:持有人…不允许，除非它在Access-Control-Allow-Headers preflight响应中(忽略*)。它发出了这样的警告:

[Deprecation] authorization will not be covered by the wildcard symbol (*)

参见:Chrome企业版发布说明，Chrome 97

它似乎也对Access-Control-Allow-Origin上的*执行了相同的限制。如果您现在想在*类行为被阻止后恢复它，您可能必须读取请求者的原点，并在预飞行响应中返回它作为允许的原点。

在某些情况下，当存在其他无效的凭据(例如:过期的JWT)时，库可能会删除Access-Control-Allow-Origin响应标头。然后，浏览器显示“No 'Access-Control-Allow-Origin'头是存在的”错误，而不是实际的错误(在这个例子中可能是过期的JWT)。请确保您的库不会丢失报头，从而使客户端感到困惑。

在我的例子中，我必须在所有现有中间件下面添加一个自定义头中间件。我认为一些中间件可能会与Access-Control-Allow-Origin头相冲突，并尝试根据他们的需要来设置它。

所以代码应该是这样的:

app.use(cors());

....all other middleware here

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:3000");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
...your routes

对我来说，解决办法简直太蠢了……允许的原点不应该有斜杠。

例如:https://example.com/ -> https://example.com

在。net Core 6.0中使用WebAPI构建

以上这些方法对我都没用……这就成功了

// global cors policy
   app.UseCors(x => x
        .AllowAnyMethod()
        .AllowAnyHeader()
        .SetIsOriginAllowed(origin => true) // allow any origin 
        .AllowCredentials());

来源:https://stackoverflow.com/a/70660054/8767516

在我的react/express应用程序中遇到了这个问题。在server.js(或你的服务器文件名)中添加以下代码为我解决了这个问题。安装cors然后

const cors = require('cors');
app.use(cors({
    origin: 'http://example.com', // use your actual domain name (or localhost), using * is not recommended
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Origin', 'X-Requested-With', 'Accept', 'x-client-key', 'x-client-token', 'x-client-secret', 'Authorization'],
    credentials: true
}))

现在，您可以从前端直接调用API，而无需传递任何额外参数。