本文共 2553 字，大约阅读时间需要 8 分钟。

跨域问题产生原因

现在越来越多的项目都采用前后端分离的开发模式，以实现前后端代码解耦的目的。处于安全考虑，后端服务器对收到的请求进行了限制和区分，因此出现跨域访问不到数据的情况。

什么是跨域

当协议、域名、端口号，有一个或多个不同时，前端请求后端服务器接口的情况称为跨域访问。同源策略限制下cookie、localStorage、dom、ajax、IndexDB 都是不支持跨域的。

解决跨域问题的两种方式

方式一（不推荐）

前端工程师需要安装Nginx，设置http请求转发，这样可以绕过浏览器跨域警告（缺点是每一个前端开发都需要安装Nginx，还需要学习配置Nginx，透明度不够）

Ngnix介绍

配置nginx.conf

1. 添加跨域相关配置，add_header开头的三行信息
   其中，add_header Access-Control-Allow-Origin *或域名;
   
2. 设置代理
   8080是本地配置的Nginx的端口号；
   8082是前端工程的端口号(可以不配)；
   8081是后端工程的端口号，“/api”代表接收到的以它开头的接口均转发到“http://localhost:8081”;
   因为都是在自己电脑跑的，因此域名都是localhost（可根据实际情况修改）
   
3. 前端发送http请求

getAllOnlineTasksData(){        var _this = this        _this.axios              .get('http://localhost:8080'+'/api/interface/findAll',{})  //请求的是Nginx代理的地址              .then(function (response) {                   console.log("获取到的所有上线任务数据："+JSON.stringify(response.data))                   //这个接口需要添加分页相关参数                   _this.dataSource = response.data       }) },

方式二（推荐）

后端服务开启跨域请求设置（对于前端来说基本是透明的），我这里以SpringSecurity为例

1. 在Springboot项目中创建CorsConfig.java文件

package com.test.testmanagement.config.springsecurity;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;/** * 解决跨域请求的 */@Configurationpublic class CorsConfig {    private CorsConfiguration buildConfig() {        CorsConfiguration corsConfiguration = new CorsConfiguration();        //  你需要跨域的地址  注意这里的 127.0.0.1 != localhost                // * 表示对所有的地址都可以访问        corsConfiguration.addAllowedOrigin("*");        // 表示只允许http://localhost:8080地址的访问（重点哦！！！！）        // corsConfiguration.addAllowedOrigin("http://localhost:8080");                //  跨域的请求头        corsConfiguration.addAllowedHeader("*"); // 2        //  跨域的请求方法        corsConfiguration.addAllowedMethod("*"); // 3        //加上了这一句，大致意思是可以携带 cookie        //最终的结果是可以 在跨域请求的时候获取同一个 session        corsConfiguration.setAllowCredentials(true);        return corsConfiguration;    }    @Bean    public CorsFilter corsFilter() {        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();        //配置 可以访问的地址        source.registerCorsConfiguration("/**", buildConfig()); // 4        return new CorsFilter(source);    }}

转载地址：http://pqtii.baihongyu.com/