详解Springboot+React项目跨域访问问题

 更新时间:2023年12月07日 10:39:03   作者:PY教义  
这篇文章主要介绍了详解Springboot+React项目跨域访问问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一、开发环境

  • 框架:springboot 1.5.10.RELEASE
  • 开发工具:IDEA
  • JDK:1.8
  • 前端框架:React 15.6.1
  • 浏览器:Chrome浏览器

二、跨域问题

本地使用ajax访问localhost:8080端口时报错:

Failed to load http://localhost:8080/test/test.do: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.

React与Springboot前后端分离,React端口为3000而Springboot端口为8080,跨端口访问用寻常的ajax是无法跨域访问的。

什么是跨域?

当客户端向服务器发起一个网络请求,url会有包含三个主要信息:协议(protocol),域名(host),端口号(port)。当三部分都和服务器相同的情况下,属于同源。但是只要有一个不同,就属于构成了跨域调用。会受到同源策略的限制。

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用(通常指使用XMLHttpRequest请求)。

三、解决方法

(1)java后端过滤器实现cros:

在后端配置过滤器CrosFilter

public class CorsFilter implements Filter {

  public void init(FilterConfig filterConfig) throws ServletException {
  }

  public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
    throws IOException, ServletException {
    HttpServletResponse httpResponse = (HttpServletResponse) response;
    httpResponse.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");//设置允许跨域的域名,需要发送cookie信息,所以此处需要指定具体的域名,
    httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    httpResponse.setHeader("Access-Control-Allow-Methods", "GET, PUT, DELETE, POST");//允许跨域的请求方式
    /**
     * ajax请求的时候如果带有xhrFields:{withCredentials:true},
     * 那么服务器后台在配置跨域的时候就必须要把Access-Control-Allow-Credentials这个请求头加上去
     */
    httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//允许发送Cookie信息
    httpResponse.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP 1.1.
    httpResponse.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0. response.setHeader("Expires", "0");
    chain.doFilter(request, response);
  }

  public void destroy() {
    // TODO Auto-generated method stub
  }
}

参考:跨域资源共享 CORS 详解——阮一峰

(2)使用代理服务器跨域访问:

在dev.js中配置

devServer: {
      port: '3000',//开发端口
      host: '127.0.0.1',//主机地址
      historyApiFallback: false,
      disableHostCheck: true,
      noInfo: false,
      stats: 'minimal',
      inline: true,
      //开启服务器的模块热替换(HMR)
      hot: true,
      // 和上文 output 的“publicPath”值保持一致
      publicPath: context,
      proxy: {
        '/mytest/*': {
          target: "http://localhost:8080",//对应后端端口
          secure: false,
          changeOrigin: true
        }//如果Controller的Requestmapping有多个这里也要对应多个
        ,'/test/*': {
          target: "http://localhost:8080",
          secure: false,
          changeOrigin: true
        }
      }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Java基础之toString的序列化 匿名对象 复杂度精解

    Java基础之toString的序列化 匿名对象 复杂度精解

    序列化即为把内存中的对象转换为字节写入文件或通过网络传输到远端服务器,本章节将带你了解Java toString的序列化 匿名对象 复杂度,需要的朋友可以参考下
    2021-09-09
  • drools中query的用法小结

    drools中query的用法小结

    这篇文章主要介绍了drools中query的使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • Java深入解析接口interface

    Java深入解析接口interface

    接口是Java中最重要的概念之一,它可以被理解为一种特殊的类,不同的是接口的成员没有执行体,是由全局常量和公共的抽象方法所组成,本文给大家介绍Java接口,感兴趣的朋友一起看看吧
    2022-06-06
  • Spring框架AOP面向切面编程原理全面分析

    Spring框架AOP面向切面编程原理全面分析

    这篇文章主要介绍了Spring框架AOP面向切面编程的全面分析,文中附含详细的示例代码分析,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2021-09-09
  • Java_Spring之Spring5 的新特性

    Java_Spring之Spring5 的新特性

    这篇文章主要介绍了Java_Spring中Spring5 的新特性,需要利用jdk8 版本更新的内容,依赖库更新,感兴趣的小伙伴可以参考阅读
    2023-04-04
  • hadoop 切片机制分析与应用

    hadoop 切片机制分析与应用

    切片这个词对于做过python开发的同学一定不陌生,但是与hadoop中的切片有所区别,hadoop中的切片是为了优化hadoop的job在处理过程中MapTask阶段的性能达到最优而言
    2022-02-02
  • Java源码解析阻塞队列ArrayBlockingQueue功能简介

    Java源码解析阻塞队列ArrayBlockingQueue功能简介

    今天小编就为大家分享一篇关于Java源码解析阻塞队列ArrayBlockingQueue功能简介,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Java实现lucene搜索功能的方法(推荐)

    Java实现lucene搜索功能的方法(推荐)

    下面小编就为大家带来一篇Java实现lucene搜索功能的方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • 如何理解Java线程池及其使用方法

    如何理解Java线程池及其使用方法

    线程池是首先创建一些线程,它们的集合称为线程池。使用线程池可以提高性能,它在系统启动时创建大量空闲的线程,程序将一个任务传给线程池,它就会启动一条线程来执行这个任务,执行结束以后,该线程并不会死亡,而是再次返回线程池中成为空闲状态,等待执行下一个任务
    2021-06-06
  • 浅谈java中的一维数组、二维数组、三维数组、多维数组

    浅谈java中的一维数组、二维数组、三维数组、多维数组

    下面小编就为大家带来一篇浅谈java中的一维数组、二维数组、三维数组、多维数组。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05

最新评论