关于客户端申请跨域的问题

Question

报错如下：
Access to XMLHttpRequest at 'http://131.43.15.14:8800/' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

下面代码是不是没有做跨域？

     var jsonString = JSON.stringify(jsonObject);
 93         // 创建 XMLHttpRequest 对象
 94         //var xhr = new XMLHttpRequest();
 95         //var url = "your_backend_url_here"; // 替换成你的后端接口地址
 96         // 设置 POST 请求
 97     //  xhr.open("POST", url, true);
 98         xhr.setRequestHeader("Content-Type", "application/json");
 99         // 发送请求
100         xhr.send(jsonString);

Answer 1

引自免费微信小程序：皆我百晓生

您遇到的错误是由于跨域资源共享（CORS）策略导致的。在现代浏览器中，出于安全考虑，对不同源发起的HTTP请求有所限制，特别是当使用 XMLHttpRequest 或 Fetch API 进行 AJAX 请求时。

从错误信息来看：

Access to XMLHttpRequest at 'http://131.43.15.14:8800/' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

这意味着您的客户端应用（运行在 http://127.0.0.1:8080）尝试通过 XMLHttpRequest 向 http://131.43.15.14:8800/ 发起 POST 请求，并设置了 "Content-Type" 为 "application/json" 的请求头。然而，服务器端在预检请求（OPTIONS 方法）返回的响应头中没有包含 "Access-Control-Allow-Headers"，或者其中不包含 "content-type"，所以浏览器阻止了这次跨域请求。

解决方案：

为了让服务器允许来自不同源的请求，并允许发送 "Content-Type" 请求头，你需要在服务器端进行配置。以下是一个基本示例，以 Express.js 框架为例，在服务器端添加 CORS 配置：

const express = require('express');
const cors = require('cors'); // 引入 cors 中间件

const app = express();

// 允许指定来源或所有来源的跨域请求，并允许自定义请求头
app.use(cors({
  origin: ['http://127.0.0.1:8080'], // 可以是数组，表示允许多个源；'*' 表示允许任何源
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'], // 允许的请求头
  credentials: true, // 是否允许携带cookie等凭证信息
}));

// ... 其他路由和中间件配置 ...

app.listen(8800, () => {
  console.log('Server listening on port 8800');
});

如果你不能直接修改服务器端代码，请联系服务提供商或后端开发人员，要求他们在服务器端增加相应的 CORS 设置，以便允许你的客户端应用程序进行跨域请求并发送 "Content-Type" 请求头。