前后端分离项目跨域问题解决方法

最新推荐文章于 2023-05-01 10:53:24 发布

五十六精研

最新推荐文章于 2023-05-01 10:53:24 发布

阅读量292

点赞数

分类专栏：错误问题前端后端文章标签：前端 spring

本文链接：https://blog.csdn.net/weixin_46102505/article/details/127600880

版权

后端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

错误问题

3 篇文章 2 订阅

订阅专栏

为什么会产生跨域问题？

因为浏览器的“同源策略”的限制问题（协议、主机、端口一致），浏览器访问非同源的网址时,会出现无法获取数据（已发请求，服务器已收到请求）,出现跨域问题

后端SpringBoot解决方法

方法一、添加标头

给要访问的方法添加添加response.addHeader()

    @RequestMapping("/listUser")
    public List<User> listUser(HttpServletResponse response){
        response.addHeader(  "Access-Control-Allow-Origin","*");//允许所有来源访同
        response.addHeader(  "Access-Control-Allow-Method","POST,GET");//允许访问的方式
        return userService.list();
    }

重启访问即可

方法二、开启跨域资源共享

跨域资源共享，也就是 Cross-Origin Resource Sharing，简拼为 CORS，是一种基于 HTTP 头信息的机制，通过允许服务器标识除了它自己以外的资源，从而实现跨域访问。

添加一个配置类

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //允许所有域名进行跨域调用
        config.addAllowedOriginPattern("*");
        // 设置你要允许的网站域名
        //config.addAllowedOrigin("http://localhost:8081");
        //允许跨域发送cookie
        config.setAllowCredentials(true);
        //放行全部原始头信息
        config.addAllowedHeader("*");
        //允许所有请求方法跨域调用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

重启访问即可

前端Vue解决方法

vue项目中在config/index.js 文件，配置proxyTable

    proxyTable: {
      '/api': {
        target: 'http://localhost:8080', // 你请求的第三方接口
        changeOrigin: false, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: { // 路径重写，
          '^/api': '' // 替换target中的请求地址，也就是说以后你在请求http://api.codingmore.top/v2/XXXXX这个地址的时候直接写成/api即可，就是给路径添加了一个前缀 /api。
        }
      },
    },

然后再main.js中添加

import axios from 'axios'
//配置axios的全局基本路径
axios.defaults.baseURL='/api'

这样再访问后端项目的路径时就不需要写全路径了，比如：

        methods:{
            getData:function () {
                this.axios({
                    method: "get",
                    //url: "http://localhost:8080/user/listUser",
                    url: "/user/listUser",
                }).then(function (response) {
                    console.log(response);
                })
            }
        }

然后需要重启项目，测试即可。