Question

我正在使用ReactJs，Spring Boot和其他Web服务登录页面。我的端口8080上运行Reactjs前端应用程序，而我的webservice / spring启动应用程序在端口9090上运行。我正在尝试使用“fetch”用我的后端代码连接的方法，但是我在fetch请求中传递头文时遇到错误。如果我删除headers属性，则执行进入被调用的后端方法。我需要在fetch方法中传递Headers，因为它需要在Web服务方法中访问它们。

请查找网络请求和响应的快照。 Without Headers With headers

下面是我的React JSX文件代码：

INNER JOIN

Answer 1

var url = "https://yourUrl";
    var bearer = 'Bearer '+ bearer_token;
    fetch(url, {
    method: 'GET',
    withCredentials: true,
    credentials: 'include',
    headers: {
        'Authorization': bearer,
        'X-FP-API-KEY': 'iphone',
        'Content-Type': 'application/json'}
    }).then((responseJson) => {
        var items = JSON.parse(responseJson._bodyInit);
    })
    .catch(error => this.setState({
    isLoading: false,
    message: 'Something bad happened ' + error
    }));

Answer 2

您不需要mode: cors，这是默认设置。

const headers = new Headers({
  "Content-Type": "application/json",
  "Authorization": "Basic bmltZXNoLnBhdGVsQHRhdHZhc29mdC5jb206cGFzc3dvcmQ="  
});

fetch('http://192.168.0.239:9090/ws/login', {
  method: 'GET',
  headers,
}).then().then().catch();

Answer 3

根据您的评论，听起来潜在的问题是您正在从您的反应应用程序执行CORS请求，该请求是从与您的弹簧后端不同的服务器提供的。我不知道Spring，但添加Access-Control-Allow-Origin HTTP标头（以及其他一些与CORS相关的标头）将解决问题。我不是100％确定为什么当你没有标题时，它的工作原理。可能存在更深层次的配置问题，或者您需要将其配置为允许具有您传递的那些标头的请求（Access-Control-Allow-Headers）。请注意，如果您不打算在生产中允许跨源请求，则可能需要添加这些标头，除非在开发中。

你也可以在没有CORS模式下获取（通过{mode: 'no-cors'}），但是有很多限制，我怀疑这是你想要的。

获取请求不使用标头

3 个答案: