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

【问题标题】：React app using API with another origin (CORS)使用 API 与另一个来源 (CORS) 反应应用程序
【发布时间】：2017-09-30 12:01:49
【问题描述】：

我有一个反应应用程序，它使用 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

我正在使用这样的 fetch 反应：

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

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

有什么建议吗？

【问题讨论】：

cookie 在有效期、域、路径等方面是否有效？
服务器正在返回这个cookie Set-Cookie: kek=qel4h9n27ov9ratshdrnqhrrhr; Version=1; Discard，所以我相信吗？
尝试为 cookie 设置显式路径 /（另外，如果你想设置多个 cookie，我相信你应该使用多个 Set-Cookie 标头）。
我尝试更改路径，但结果相同。饼干：Set-Cookie:kek=9rev41dpo3eq337m389bb9mbe5; Version=1; Path=/; Domain=http://localhost:8080; Max-Age=100000。我只使用一个 cookie。

标签： reactjs cookies fetch cross-domain

【解决方案1】：

在现有答案上添加更多内容。

通过 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。

【讨论】：

你帮了我。这就是我一直在寻找的。非常感谢

【解决方案2】：

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

【讨论】：

那适合生产吗？
迁移到生产环境时，您应该拥有相同的服务器。不是吗？当你为生产构建 react 应用程序时，你不再需要 react-script。

【解决方案3】：

安装这个。

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

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

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

如果您使用的是 node.js，请执行以下操作： node.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）中添加此指令： Header set Access-Control-Allow-Origin * in Settings （作为第一个选项）。

【讨论】：

【解决方案4】：

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

【讨论】：