为什么 GET 请求会被 CORS 策略阻止？

Question

我一直在开发一个使用 express 和 cors 的混合应用程序，这个应用程序将获取和发布请求从客户端 js 文件发送到服务器文件。 在使功能正常工作后，我一直在添加最后的润色，并且在发出获取请求时出现以下错误：

CORS 策略阻止了从源“http://localhost:8000”访问“http://address:3000/search/Cottonelle”的 XMLHttpRequest：“Access-Control-Allow-Origin”标头具有值“ http://address.com' 不等于提供的来源。

“地址”是机器的IP地址。 该应用程序允许用户为不同的项目输入条目并将它们发送到服务器进行保存，以及从服务器检索它们。 该应用程序在使用“http://localhost”代替地址时工作，通过一些测试，我发现当 html 的 CSP connect-src 和客户端 js 文件中使用的地址都是 ip 地址时，它可以工作，表明问题出在服务器 js 文件上。 虽然 get 请求不起作用，但 post 请求仍然起作用。 post 和 get 请求之间的区别在于 post 使用“/post”作为其路由，而 get 使用“/search/:query”。 以下应该是重现问题所需的最短代码：

html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com
        ;connect-src http://address:3000">
 
        <script src="jquery.js"></script>
        <script src="client.js"></script>
    </head> 
<body>
</body>
</html>

客户端.js：

const address = "http://address:3000" 

let name = "test"
$.get(address + "/search/" + name ,function(data, status){
    alert("The status text is: " + status + "\nThe status code is: " + data);
});

服务器.js：

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

var corsOptions = { origin: 'http://address.com', optionsSuccessStatus: 200}
app.use(cors(corsOptions))
const port = 3000

app.get('/search/:query', (req, res) => {
    let myStatus = res.statusCode;
    res.sendStatus(myStatus)
})

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

Answer 1

server.js 授权http://address.com但不是 localhost:8000 （我认为您的网站在本地执行）

要解决您的问题，请在 server.js 的授权主机中添加 localhost:8000

app.use(cors(
   { origin: 'http://address.com', optionsSuccessStatus: 200},
   { origin: 'http://localhost:8000', optionsSuccessStatus: 200}
))

为什么 GET 请求会被 CORS 策略阻止？

问题描述

1 个解决方案

解决方案1
0 2021-11-10 07:03:36

为什么 GET 请求会被 CORS 策略阻止？

问题描述

1 个解决方案

解决方案1 0 2021-11-10 07:03:36

解决方案1
0 2021-11-10 07:03:36