为什么在服务器端设置 Access-Control-Allow-Origin 后仍然出现跨域错误？答案

【问题标题】：Why there is still a cross oorigin error after setting the Access-Control-Allow-Origin in server side?为什么在服务器端设置 Access-Control-Allow-Origin 后仍然出现跨域错误？
【发布时间】：2019-11-09 06:22:42
【问题描述】：

我刚刚运行了一个 CORS 跨源演示。该演示使用 node.js 运行。这是 index.html：

<button>click to cross origin using CROS</button>
<p>hello world ????</p>
<script>
    var btn = document.getElementsByTagName('button')[0];
    var text = document.getElementsByTagName('p')[0];
    btn.addEventListener('click', function () {
        var xhr = new XMLHttpRequest();
        var url = 'http://localhost:3001';    
        xhr.open('PUT',url,true);                
        xhr.send();                       
        xhr.onreadystatechange = () => {     
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {  
                text.innerHTML = xhr.response;
            }
        }
    })
</script>

这里是 serverRes.js：

var express = require('express');
var app = express();
var responsePort = 3001;  
app.get('/', (req, res) => {
    res.set('Access-Control-Allow-Origin', 'http://localhost:3000'); 
    res.send("Hello world from CROS.????");  
});

app.listen(responsePort, function () {
    console.log('cros_responser is listening on port '+ responsePort);
});

你可以看到我已经设置了Access-Control-Allow-Origin和http://localhost:3000，所以对预检请求的响应实际上应该通过访问控制检查，这意味着请求无论如何都会成功。但是当我转到3000端口时，我得到的是：

但是为什么呢？为什么在服务器端设置了Access-Control-Allow-Origin后还是会出现cross origin错误？另外，我试过写：

app.all('/', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.send("Hello world from CROS.????");   
    next(); // pass control to the next handler
});

根据Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?。但是错误依然存在。

【问题讨论】：

Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?的可能重复

标签： javascript node.js cross-domain

【解决方案1】：

您发布的代码应该可以工作。

var express = require('express');
var app = express();
var responsePort = 3001;  


app.all("/", function(req, res, next){
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  next();
});


app.get('/', (req, res) => {
    res.set('Access-Control-Allow-Origin', 'http://localhost:3000'); 
    res.send("Hello world from CROS.?");  
});

app.listen(responsePort, function () {
    console.log('cros_responser is listening on port '+ responsePort);
});

尝试点击这个 repl。

https://repl.it/@nithinthampi/WirelessGentleSigns

【讨论】：

选项请求正在通过。您需要在代码中处理 PUT 请求。
我已经处理好了（打印数据）
你确定吗？尝试再次点击repl。我添加了一条 PUT 路线
而且 404 与 cors btw 无关 :)。这应该是您在代码中编写的 PUT 处理程序的问题，并且与您发布的问题无关
哦，它有效。但是我对代码感到困惑，因为这是放置请求，我们可以删除app.get()同时保留app.put()吗？

【解决方案2】：

你还需要允许带有标题Access-Control-Allow-Methods的http动词：

res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');

这个答案有更详细的描述： Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?

【讨论】：

不，它不起作用。我将代码更改为app.all('/', function (req, res, next) { res.header('Access-Control-Allow-Origin', 'http://localhost:3000'); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); res.send("Hello world from CROS.?"); next(); });，但没有任何变化。仍然是一个错误。
可能我错过了“OPTIONS”方法...我会添加它
您是否按照我发布的链接上的说明进行操作？
你的评论没有OPTIONS方法……看看更新后的答案
我会试试的。但是我的请求是PUT，为什么需要设置Access-Control-Allow-Methods包括OPTIONS？