POST AJAX 请求被拒绝 - CORS?

Posted

技术标签:

【中文标题】POST AJAX 请求被拒绝 - CORS?【英文标题】:POST AJAX request denied - CORS? 【发布时间】:2017-01-14 19:13:15 【问题描述】:

我在 node.js 服务器上的 5000 端口上设置了 CORS,如下所示:

var app = express();

app.use(cors()); //normal CORS
app.options('*', cors()); //preflight 

app.post('/connect', function(req, res)  
    console.log("Connection request received !")
);

var port = 5000;
app.listen(port, function () 
    console.log('Listening on port '+port);
);

我现在正尝试使用 JQuery 在从我的硬盘打开的静态网页中发送 AJAX POST 请求:

var xhr = $.post(
            url: 'http://localhost:5000/connect',
            complete: function() 
                console.log("done !")
            ,
            crossDomain: true
        );

xhr.fail(function(xhr, status, error)
    alert(error)
)

complete 函数从未被调用,我得到的唯一警报是来自 XHR fail 处理程序的警报,其中包含以下错误:

NS_ERROR_DOM_BAD_URI: Access to restricted URI denied

我认为 CORS 配置良好,我缺少什么?


编辑:就我而言,我能找到的最佳解决方案是从服务器发送页面:

app.use(express.static('web'))

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

【问题讨论】:

@PraveenKumar 这个问题不是这个问题的重复:***.com/questions/7969265。公认的答案是让 CORS 能够防止跨域策略出现问题,我就是这样做的。请尽量不要太快标记为重复。 重新打开它。看起来NodeJS的东西有问题......让我们看看NodeJS的人是否回答它。 非常感谢 您所说的“在从我的硬盘打开的静态网页中”是否意味着该文件是使用file:// 协议加载的? @Philip 绝对 【参考方案1】:

这是我正在使用的代码。它位于我的 app.js 文件中

app.all("/*", function (req, res, next) 

  res.header("Access-Control-Allow-Origin", req.headers.origin);
  res.header("Access-Control-Allow-Credentials",true);
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type,Accept,X-Access-Token,X-Key,Authorization,X-Requested-With,Origin,Access-Control-Allow-Origin,Access-Control-Allow-Credentials');
  if (req.method === 'OPTIONS') 
    res.status(200).end();
   else 
    next();
  
);

【讨论】:

我接受您的回答,因为即使它不能直接解决问题,但它提供了一个很好的解决方法,直到 cors 模块得到修复。此外,代码比@TimothyMoody 的更干净。谢谢! if ( req.method === 'OPTIONS') 救了我。谢谢!!【参考方案2】:

CORS 在使用file 协议时不起作用,因为那里没有服务器可以发回必要的标头。您使用服务器的解决方案是使 CORS 工作的唯一方法。

【讨论】:

我希望服务器在 AJAXing 时向我发送标头,而不是在加载页面时,这不是它的工作方式。当 AJAXing 时,确实有一个服务器应该向我发送标头,它应该足够了 对不起,我的意思是 file 协议上的页面没有主机名可以在 Ajax 请求中发送,因此响应服务器无法验证它是否匹配 CORS 访问规则。【参考方案3】:

我有一个使用 cors 的项目。

使用的节点代码只是:

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

app.use(cors());

/* Connect/other routes here */

jquery 代码看起来有点不同:

$.post('http://localhost:5000/connect', ).done( () => 
  // Request complete
).fail((jqXHR) => 
  // Request failed 
);

【讨论】:

这几乎完全等同于我的代码,除了你不启用飞行前请求,我不使用done xhr 回调...【参考方案4】:

我从来没有使用过 cors(),所以我不能说那篇文章。但是您可以通过设置 node.js 标头来手动允许跨源资源共享。

在所有请求上添加此预路由

app.route('*')
   .all(function(req, res, next) 
     res.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
     res.header('Access-Control-Allow-Origin', '*');
     res.header('Access-Control-Allow-Headers', 'X-API-TOKEN, Content-Type, Authorization, Content-Length, X-Requested-Wit
h');
   next();
)

这应该可行。

【讨论】:

聪明的方案,我一定会试试的

以上是关于POST AJAX 请求被拒绝 - CORS?的主要内容,如果未能解决你的问题,请参考以下文章

AJAX CORS http 请求 nginx 拒绝

Axios 发布请求被烧瓶制作的 api 拒绝。 CORS错误即将出现[重复]

asp.net core mvc cors请求被拒绝[重复]

在 Angularjs 中的 IE10+ 中访问被拒绝 CORs 请求,需要跨源资源共享错误(信息?)

由于浏览器设置的标头,Safari 拒绝重定向 CORS 请求

Laravel 4 响应标头:拒绝基于源域的 ajax 请求