Question

fetch('http://localhost:9000/api/app/contact', {
    method: 'POST',
    headers: {
        'content-type': 'application/json'
    },
    body: JSON.stringify({
        email: this.state.email,
        contactNumber: this.state.phone,
        enquiry: this.state.msg
    })
})
.then(function(res) { return res.json() })
.then(function(data) {
    alert('We will contact you shortly') 
});

当我在编码上面渲染时，我遇到了以下错误：

无法加载http://localhost:9000/api/app/contact：响应预检请求未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许来源“http://localhost:8080” 访问。如果不透明的响应满足您的需求，请设置请求模式为'no-cors'以获取禁用CORS的资源。

但是当我和邮递员一起尝试时，它已经成功运作了。请帮帮我，我的fetch api中是否缺少任何代码。

以下是邮递员POST请求和代码。

以下代码是来自Postman的发布请求。

var data = JSON.stringify({
  "email": "test@gmail.com",
  "contactNumber": "0123456789",
  "enquiry": "Testing"
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "http://localhost:9000/api/app/contact");
xhr.setRequestHeader("content-type", "application/json");
xhr.setRequestHeader("cache-control", "no-cache");
xhr.setRequestHeader("postman-token", "d5e08b69-5f0f-8193-e021-e2c3b1bfe1a3");

xhr.send(data);

在NodeJS服务器端，我已经在后端使用CORS了。

var express = require('express'),
    controller = require('./app.controller'),
    router = express.Router(),
    cors = require('cors');

var issue2options = {
  origin: true,
  methods: ['POST'],
  credentials: true,
  maxAge: 3600
};

router.post('/contact', cors(issue2options), controller.sendContactForm);
module.exports = router;

Answer 1

您需要为浏览器自行发送的CORS preflights添加明确的OPTIONS处理：

app.options('/contact', cors(issue2options)); // enable preflight OPTIONS
router.post('/contact', cors(issue2options), controller.sendContactForm);

请参阅https://www.npmjs.com/package/cors#enabling-cors-pre-flight

Answer 2

Postman与浏览器不同。

要解决此问题，您需要服务器 http://localhost:9000/api/app/contact在其标头中返回CORS标头，例如Access-Control-Allow-Origin: *

请阅读此处以获取详细的CORS参考https://enable-cors.org/server.html

Fetch API Post方法无效

2 个答案: