Question

我有一个react应用程序，它使用在另一个域上运行的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"
    })
}

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

有什么建议吗？

Answer 1

安装此。

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

安装完成后，单击他的BrowserIcon并打开。这是全部了。您不会收到更多错误。

EDIT。生产解决方案如果您想从服务器进行配置（或者只是不添加浏览器扩展，请尝试以下方法：）

如果您使用的是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文件中添加：<?php header('Access-Control-Allow-Origin: *'); ?>。正如我所见，事实并非如此，所以...在你的服务器（例如：Apache）中添加这个指令：Header在Settings中设置Access-Control-Allow-Origin *（作为第一个选项）。
< / LI>

Answer 2

如果您使用create-react-app只是将主API网址代理添加到package.js例如{{}}，我只想分享如何通过此post轻松实现本地开发。{{3}} 1}} 无需在后端设置CORS。

Answer 3

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

Answer 4

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

通过 react，您可以在 package.json 中使用“代理”来避免 CORS。基本上，如果您需要访问 localhost:8100（您的 Java 后端）并且您的 React 应用程序在 localhost:3000

上运行

您可以设置：

<块引用>

在您的package.json

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

然后，当您想要访问 /hello 时，您可以这样做：

import axios from 'axios';

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

它会被重定向到 http://localhost:8100/hello 这样你就可以避免 CORS。

使用API与另一个来源（CORS）重用应用程序

4 个答案:

使用API​​与另一个来源（CORS）重用应用程序

4 个答案:

使用API与另一个来源（CORS）重用应用程序