为什么在服务端设置了Access-Control-Allow-Origin后还是出现跨源错误？

Question

我只是运行一个 CORS cross origin demo.The 演示是运行 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，所以preflight请求的响应实际上应该通过访问控制检查，这意味着请求会成功anyway.But 当我转到 3000 端口时，我得到的是：

但是为什么呢？为什么在server端设置了Access-Control-Allow-Origin后还是出现cross origin error？另外，我试过写：

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?。但是错误依然存在。

Answer 1

您还需要允许带有 header 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?

Answer 2

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

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

为什么在服务端设置了Access-Control-Allow-Origin后还是出现跨源错误？

Why there is still a cross oorigin error after setting the Access-Control-Allow-Origin in server side?

javascript

cross-domain

node.js