Question

我正在尝试将表格数据从React / Redux发送到本地托管的Express.js服务器。但是，我收到了CORS错误：

Access to XMLHttpRequest at 'http://localhost:4000/api/donate' from
 origin 'http://localhost:3000' has been blocked by CORS policy: Response
 to preflight request doesn't pass access control check: No 'Access-
Control-Allow-Origin' header is present on the requested resource.

VM6535:1 Cross-Origin Read Blocking (CORB) blocked cross-origin
 response http://localhost:4000/api/donate with MIME type text/html. See 
https://www.chromestatus.com/feature/5629709824032768 for more details.

createError.js:17 Uncaught (in promise) Error: Network Error
    at createError (createError.js:17)
    at XMLHttpRequest.handleError (xhr.js:87)

这是我设置为让Express.js接收我的React数据的最初CORS策略：

// index.js in the backend project
let cors = require("cors");

const corsOptions = {origin : "http://localhost:3000/" }; // React app is on port 3000

router.post('/api/donate', cors(corsOptions), (req, res, next) => { ....

我之前曾使用字符串数据将测试信用卡费用发送到Stripe，并且没有任何错误。现在唯一的区别是，在我仅使用来自react-stripe-elements的表单/输入组件发送数据之前，现在我还从Redux存储中发送了一些数据。

即使现在出现此错误，Stripe仍会以部分令牌数据（可能是默认值，不确定）做出响应。

我的CORS政策缺少什么吗？我以为将localhost：3000列入白名单可以解决该问题，而且看来也可以解决。但它仍在发出上述错误。

Answer 1

CORB是由某些浏览器强制实施的新策略。它贯彻了我找回我所要求的想法的想法。因此，如果您使用JSON标头进行响应，并且像在这种情况下一样返回text / html，则chrome将吃掉响应并抛出您看到的第二个错误。将您的内容标题更改为text / html，这可能对您有用。

Express.js：CORS策略阻止Stripe API请求

1 个答案: