提问人：Hideharu 提问时间：11/17/2023 更新时间：11/17/2023 访问量：48
对 fetch 的访问已被 CORS 策略阻止，无法访问后端
Access to fetch has been blocked by CORS policy, no access to back-end
问：
尝试向 API 发出 GET 或 POST 请求时，出现以下错误：submitRequest：1 Access to fetch at 'API_END_POINT' from origin 'ORIGIN' has been blocked by CORS policy： No 'Access-Control-Allow-Origin' header is present on the requested resource.如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”，以便在禁用 CORS 的情况下获取资源。
但是，API 完全超出了我的控制范围，我无法访问它。此外，只有在我使用 AWS Amplify 部署我的 react 应用程序后，才会出现此问题。如果我在本地机器上运行它，则没有问题。有什么方法可以在前端解决这个问题吗？
答：
0赞
Caden Finkelstein
11/17/2023
#1
您可以尝试以下 4 个选项：
编辑 CORS 策略
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' https://api.example.com; script-src 'self'">
将 替换为您尝试请求的 API。api.example.com
请专门查阅 API 的文档
找到并阅读为 API 提供的任何文档。或者翻看别人的问题，看看这是否是重复的。
使用内部代理
- 创造
/proxy.conf.json
{
"/api": {
"target": "https://api.example.com",
"secure": false,
"changeOrigin": true
}
}
- 更新您的package.json
"scripts": {
"start-proxy": "react-scripts start --proxy 3001 --config ./proxy.conf.json"
}
使用在线 CORS 代理服务
使用在线 CORS 代理服务，例如 CORS Anywhere。我不建议使用它，但您可以尝试。
然后，您可以在任何需要的地方使用此代码：
const apiUrl = 'https://api.example.com';
const corsProxyUrl = 'https://cors-anywhere.herokuapp.com/';
fetch(`${corsProxyUrl}${apiUrl}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
评论