反应连接到节点 Cors 预检失败

Posted 2023-03-04

【中文标题】反应连接到节点 Cors 预检失败

【英文标题】：React connecting to Node Cors Preflight Failure

【发布时间】：2018-01-25 04:13:15

【问题描述】：

节点服务器

var app = express();                 

app.use(function(req, res, next) 
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Origin', req.headers.origin);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
if ('OPTIONS' == req.method) 
     res.send(200);
  else 
     next();
 
);

React JS 获取

function request(url, options) 
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON);


export function* login() 
  const username = yield select(makeSelectUsername());
  const password = yield select(makeSelectPassword());

  const requestURL = 'http://myurlhere.com:1337/user/login/';

  const requestOptions = 
    method: 'POST',
    mode: 'cors',
    headers: 
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    ,
    body: JSON.stringify(
      username: username,
      password: password
    )
  

  try 
    const result = yield call(request, requestURL, requestOptions);

    yield put(loginApiCallSuccess(result));
   catch (err) 
    yield put(loginApiCallFailure(err));
  

我需要帮助确定我的请求或服务器端处理有什么问题，其中 chrome 在预检失败后取消我的请求，也就是为什么我的预检请求失败。

我在 localhost 上运行 react 并使用不同的 url 连接到远程服务器。

据我所知，预检请求失败，然后 chrome 正在取消请求。但是，当我在本地运行请求时，登录仍然成功地访问了节点端的登录路由。

在单步执行代码时，我在预检调用后的实际调用中从服务中收到 400 错误。如果我拨打电话但不通过，我会得到一个 （已取消）在开发工具的网络选项卡中。但是，每次调用在服务器端都是成功的。

General
Request URL:http://jenkins.murmillosoftware.com:1337/user/register/
Request Method:POST
Status Code:400 Bad Request
Remote Address:52.5.222.29:1337
Referrer Policy:no-referrer-when-downgrade

Response Headers
view source
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept, Origin
Access-Control-Allow-Methods:GET,PUT,POST,DELETE
Access-Control-Allow-Origin:http://127.0.0.1:3000
Connection:keep-alive
Content-Length:47
Content-Type:application/json; charset=utf-8
Date:Wed, 16 Aug 2017 22:24:48 GMT
ETag:W/"2f-vn6Bxm14Gkpb5HFTCsgU2h3Nq3o"
set-cookie:connect.sid=s%3AjPVtqIoi6zy0QPmhfFkprFObfwj_J-Lw.sPvW3qRc1Vwj4R6qFBtW0oXykF68Qn%2FAwmLCWrg51qc; Path=/; HttpOnly
X-Powered-By:Express

Request Headers
view source
Accept:application/json
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:44
Content-Type:application/json
Host:jenkins.murmillosoftware.com:1337
Origin:http://127.0.0.1:3000
Pragma:no-cache
Referer:http://127.0.0.1:3000/login?
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/60.0.3112.90 Safari/537.36

Request Payload
view source
username: "fdasfas", password: "asdfasdf"
password
:
"asdfasdf"
username
:
"fdasfas"

【问题讨论】：

只是谷歌的 CORS

打开开发者工具。打开控制台。阅读错误信息。 Chrome 不会因为 CORS 问题而取消 Ajax 请求，但没有说明原因。

从本地调用中添加了网络日志，这样我就可以验证它确实在访问服务。

【参考方案1】：

你有没有尝试过 express/cors 我最近也遇到了访问允许来源的问题，然后我从那里下载 express/cors

npm install cors

然后在你的程序中添加

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

app.use(cors())

app.get('/products/:id', function (req, res, next) 
  res.json(msg: 'This is CORS-enabled for all origins!')
)

app.listen(80, function () 
  console.log('CORS-enabled web server listening on port 80')
)

您还可以在 [link]https://github.com/expressjs/cors 中查看其他使用 cors 的方法