简体   繁体   English

为什么在服务器端设置 Access-Control-Allow-Origin 后仍然出现跨源错误?

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

I just run a CORS cross origin demo.The demo is running with node.js.我刚刚运行了一个 CORS 跨域演示。演示与 node.js 一起运行。 Here is the index.html:这里是索引。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>

Here is the serverRes.js:这是 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);
});

You can see that I have set the Access-Control-Allow-Origin with http://localhost:3000 ,so the response to the preflighted request should actually pass the access control check,which means the request will succeed anyway.But when I go to the port 3000,what I get is:你可以看到我已经用http://localhost:3000设置了Access-Control-Allow-Origin ,所以对预检请求的响应实际上应该通过访问控制检查,这意味着请求无论如何都会成功。但是当我go 到端口 3000,我得到的是:

在此处输入图像描述

But why?Why there is still a cross oorigin error after setting the Access-Control-Allow-Origin in server side?但是为什么呢?为什么在服务器端设置了Access-Control-Allow-Origin后还是会出现cross origin错误? Also,I have tried writing:另外,我试过写:

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
});

according to Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?根据为什么不将 CORS 标头添加到 OPTIONS 路由允许浏览器访问我的 API? . . But the error still exists.但是错误仍然存在。

The code you posted should work.您发布的代码应该可以工作。

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);
});

Try hitting this repl instead.尝试点击这个 repl。

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

you also need to allow the http verbs with the header Access-Control-Allow-Methods :您还需要使用 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');

This answer has a more detailed description: Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?这个答案有更详细的描述: Why does not adding CORS headers to an OPTIONS route allow browsers to access my API?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 即使在服务器和客户端上设置了标头后,也会出现错误“请求的资源上没有&#39;Access-Control-Allow-Origin&#39;标头” - Error “No 'Access-Control-Allow-Origin' header is present on the requested resource” even after setting headers on server and client 交叉请求时出错:“ Access-Control-Allow-Origin不允许原产”? - Error on cross request: “Origin is not allowed by Access-Control-Allow-Origin”? 添加Access-Control-Allow-Origin后,仍然在请求的资源上出现“No&#39;Access Control Allow Origin&#39;标头”错误:* - Still having “No 'Access Control Allow Origin' header is present on the requested resource” error after adding Access-Control-Allow-Origin: * jQuery跨域错误-没有“访问控制允许来源” - JQuery Cross Domain Error - No 'Access-Control-Allow-Origin' 没有“访问控制允许来源”,但仍在处理 - No 'Access-Control-Allow-Origin' but still processing 即使标题在我的服务器端代码中也没有“ Access-Control-Allow-Origin”错误 - No 'Access-Control-Allow-Origin' error even though the header is there on my server side code 设置访问控制允许来源 - Setting Access-Control-Allow-Origin 节点服务器和Apache服务器-无“访问控制允许来源”错误 - Node Server and Apache Server - No 'Access-Control-Allow-Origin' Error 为什么即使在servlet中设置了“ esponse.addHeader(“ Access-Control-Allow-Origin”,“ *”);”,CORS请求仍会失败? - Why is CORS request failing even after setting “esponse.addHeader(”Access-Control-Allow-Origin“, ”*“);” in servlet? 当 Access-Control-Allow-Origin:* 仍然反映在响应中时,跨源请求被阻止 - Cross-Origin request blocked while Access-Control-Allow-Origin:* still reflect in the response
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM