无法解决对 Express API 的 AJAX 调用的 CORS 错误
Posted
技术标签:
【中文标题】无法解决对 Express API 的 AJAX 调用的 CORS 错误【英文标题】：Unable to resolve CORS error on AJAX call to Express API 【发布时间】：2021-06-29 01:01:00 【问题描述】：我正在尝试使用 ajax 访问 express api，但无法解决 CORS 错误。当我在浏览器上禁用它时它可以工作，但我想让它在没有它的情况下也能工作。
后端代码：-
var express = require('express');
var cors = require('cors')
var app = express();
app.use(cors())
app.get('/', (req, res) =>
console.log("Request incoming...")
let data = [
name: "Krish",
age: 23,
hobby: "Football"
,
name: "John",
age: 23,
hobby: "Basketball"
]
res.send(JSON.parse(JSON.stringify("data":data)))
);
app.listen(5000, ()=>console.log("Listening on port 5000"))
前端代码：
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<table id="myTable">
<tr>
<th>Name</th>
<th>Age</th>
<th>Hobby</th>
</tr>
</table>
<button id="btn" class="btn btn-primary">Click to get Data</button>
</div>
</div>
<script>
$(document).ready(function()
$("#btn").on('click', function()
console.log("Function called")
$.ajax(
url: "http://localhost:5000/",
type: "GET",
crossDomain: true,
//data: JSON.stringify("data":"Hardik"),
headers: "charset":"UTF-8",
"Accept": "application/json",
"Access-Control-Allow-Origin":"*",
"Access-Control-Allow-Credentials":"true",
"Access-Control-Allow-Methods":"GET, POST, PUT, PATCH, DELETE, OPTIONS"
,
dataType: "json",
beforeSend: function (x)
if (x && x.overrideMimeType)
x.overrideMimeType("application/j-son;charset=UTF-8");
,
success: function (response)
console.log(response.data)
,
error: function (xhr, status)
console.log("Error " + status)
);
)
)
</script>
</body>
</html>
错误信息：
从源“null”访问“http://localhost:5000/”处的 XMLHttpRequest 已被 CORS 策略阻止：“Access-Control-Allow-Origin”标头包含无效值“null//undefined” .
【问题讨论】：
Access-Control-Allow-Origin、Access-Control-Allow-Credentials 和 Access-Control-Allow-Methods 是服务器响应您的权限。它们不是您发送到服务器的内容。您应该发送 Access-Control-Request-Method 和 Access-Control-Request-Headers 如果你喜欢developer.mozilla.org/en-US/docs/Web/HTTP/…，请在此处阅读 CORS 【参考方案1】：这些是响应标头：
"Access-Control-Allow-Origin":"*", "Access-Control-Allow-Credentials":"true", "Access-Control-Allow-Methods":"GET, POST, PUT, PATCH, DELETE, OPTIONS"
将它们从客户端发送到服务器是没有意义的。
服务器必须向客户端授予权限。客户端无法授予自己权限。
通过添加这些标头，您可以将一个简单的请求转换为a preflighted one，因为浏览器必须请求许可才能使用自定义标头发出请求。
您正在使用的 cors 模块可以是configured to allow preflighted requests，但在这种情况下，您首先应该避免发出预检请求。
从客户端删除自定义标头。
【讨论】：
【参考方案2】：由于后端的响应而发生 CORS 错误。 正如其他人提到的那样，在您的请求中发送这些标头没有任何作用，您需要做的是从您的后端/api 发送这些标头。我看到您在后端导入了某种 CORS 库，但显然它无法正常工作，因此请确保它以正确的方式配置并完全安装，或者只是粘贴到您请求中的标头上。
【讨论】：
以上是关于无法解决对 Express API 的 AJAX 调用的 CORS 错误的主要内容，如果未能解决你的问题，请参考以下文章
无法在 IIS Express 中运行 ASP.NET Core Web API 项目
React app Express Api无法运行localhost 404（未找到）