跨域请求被阻止：CORS 标头“Access-Control-Allow-Origin”缺失

Posted 2023-03-04

【中文标题】跨域请求被阻止：CORS 标头“Access-Control-Allow-Origin”缺失

【英文标题】：Cross-Origin Request Blocked: CORS header ‘Access-Control-Allow-Origin’ missing

【发布时间】：2021-01-03 12:47:07

【问题描述】：

我正在运行一个快速服务器，只是为了路由目的，而客户端页面正在使用 axios 来获取url。我已经尝试了一整天我能找到的所有可能的解决方案，但没有成功。

我知道如果请求不是来自同一个域，它是 被目标服务器视为 CORS。 随后发送的响应带有一个标头，表明该请求最初来自另一个域。 浏览器阻止内容，因此无法读取为响应 通过客户端页面上的响应代码块。

但是，我可以通过单击开发者控制台的响应选项卡在响应中看到 json 页面。

服务器页面

const express = require('express')
const cors = require('cors')
const app = express()

app.use(
   cors(
       credentials: true,
       origin: [
           'http://localhost:8080'           
       ]
   ),
)

app.options('*', cors());


app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res)       
   res.sendFile( __dirname + "/public/" + "index.html" );     

)

客户页面

var nse = axios.create();
// delete nse.defaults.headers.common["Access-Control-Allow-Origin"];
//nse.defaults.headers.common['Access-Control-Allow-Origin']='http://localhost:8081';
// nse.defaults.headers.common['Access-Control-Allow-Methods']='POST, OPTIONS';
// nse.defaults.headers.common['Access-Control-Max-Age']= 86400;
// nse.defaults.headers.common['Access-Control-Allow-Headers']= 'Origin, Content-Type, Accept';

nse.get('https://www1.nseindia.com/live_market/dynaContent/live_watch/stock_watch/liveIndexWatchData.json'
, crossdomain: true )
   .then(resp =>          
       console.log("xxxxx");
      data = resp.data.data;      
        window.alert("hi");      
   )
   .catch(function (error) 
    if (error.response)           
      console.log(error.response.data);
      console.log(error.response.status);              
        
    );      

我在 Firefox 浏览器的开发者控制台中收到以下错误。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www1.nseindia.com/live_market/dynaContent/live_watch/stock_watch/liveIndexWatchData.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

我相信这个很难破解。请帮助我解决此错误，以便我能够以编程方式读取 JSON 响应。

【问题讨论】：

这能回答你的问题吗？ CORS header 'Access-Control-Allow-Origin' missing

【参考方案1】：

服务器识别了请求，但是它没有将 Access-Control-Allow-Origin 标头附加到响应中。浏览器期望这一点，因为它不存在，浏览器会抛出错误并阻止访问响应数据（即使您可以在开发工具中看到它）。

您需要在服务器上配置 CORS 以允许来自您发送请求的来源的请求。

https://expressjs.com/en/resources/middleware/cors.html

【讨论】：

感谢 Nick，服务器 (nseindia) 识别了请求，但是它没有将 Access-Control 标头附加到响应中。因此，浏览器阻止了 JSON 响应。我需要在我的服务器（本地主机）上配置 CORS，以允许来自我发送请求的源（本地主机）的请求。我的理解正确吗？

nseindia 是您控制的服务器吗？ nseindia 是需要配置为允许来自不同来源（在本例中为本地主机）的请求的服务器。如果没有为此设置 nseindia，则 Access-Control-Allow-Origin 标头将永远不会附加到 nseindia 发送的任何响应中，不幸的是，您的应用将永远无法访问数据。

谢谢尼克，是的，nseindia 不是我的服务器。同时，我将 axios 代码移动到我的快速路由 localhost 服务器，并将输出输出到控制台（命令 shell）。 PS：我对你的回复投了赞成票，但不幸的是，它还没有公开展示。

听起来不错，如果你不使用浏览器就能获取数据，你就不用担心浏览器会阻塞响应数据:)