使用 API 与另一个来源 (CORS) 的反应应用程序

Question

我有一个反应应用程序，它使用Java ee后端休息服务器，运行在另一个域上。我已启用 CORS：

Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Headers : origin, content-type, accept, authorization
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, PUT, DELETE, OPTIONS, HEAD
Access-Control-Max-Age : 1209600

我正在使用这样的 react with fetch：

export function get(path, headers) {
return fetch(apiUrl + path, {
"metod" : "GET",
"headers" : headers,
"credentials" : "include"
})
}

我的反应应用程序正在http://localhost:3000上运行。 当我登录时，服务器会返回 Set-Cookie，但除非我尝试再次登录，否则该 cookie 不会包含在对服务器的任何进一步请求中。然后，它包含在该特定登录请求中。

有什么建议吗？

Answer 1

如果您只是通过将主 API url 代理添加到您的package.js中来使用create-react-app，我只想通过这篇文章分享我如何使我的本地开发变得轻松"proxy": "http://localhost:8080/API"无需在后端设置 CORS。

Answer 2

安装这个。

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=es

安装后，单击他的浏览器图标并打开。就是全部。您不会收到更多错误。

编辑。 生产解决方案 如果你想从你的服务器配置它(或者干脆不添加浏览器扩展，试试这个：)

• 如果使用节点.js请执行以下操作：节点.js服务器文件：response.writeHead(200, { 'Content-Type': contentType, 'Access-Control-Allow-Origin': '*' })

• fetch('http://ajax.googleapis.com/ajax/services/feed/load?v=‌​1.0&num=8&q=http://r‌​ss.cnn.com/rss/editi‌​on_entertainment.rss‌​?output=rss', { method: 'get', mode: 'no-cors', }).then(() => { console.log('Works!'); });

• 其他解决方案：如果你也在使用PHP，你可以添加：<?php header('Access-Control-Allow-Origin: *'); ?>到你的PHP文件中。如我所见，事实并非如此，所以...在您的服务器(例如：Apache)中添加此指令：设置中的标头集Access-Control-Allow-Origin *(作为第一个选项)。

Answer 3

因此，我通过使用另一个stackoverflow线程和robertklep的评论解决了这个问题。如此处所述："在本地主机上工作时，必须完全省略cookie域。我实现了robertkleps的想法，但没有设置域。它产生了这样的设置饼干：Set-Cookie:kek=7fukucsuji1n1ddcntc0ri4vi; Version=1; Path=/; Max-Age=100000.这工作正常。

Answer 4

添加更多现有答案。

使用 react 你可以在package.json中使用"proxy">来避免 CORS。 基本上，如果您需要访问localhost:8100(您的 java 后端)并且您的 react 应用程序在localhost:3000上运行

您可以设置：

在您的package.json

"proxy": "http://localhost:8100"

然后，当您想要访问/hello哪个将成为 Java API 的端点时，您可以执行以下操作：

import axios from 'axios';
axios.get('/hello')
.then(resp => {
console.log(resp.data);
});

它将被重定向到 http://localhost:3000/hello，因此您将避免 CORS。