Vue解决跨域问题

在本地测试Vue + spring boot前后端分离项目时,因为前后端项目端口不一致会导致跨域问题

此时就需要前后端分别进行设置允许跨域处理

在设置允许跨域后,在登录场景下还会用到session,而session的原理就是在浏览器的cookie中保存一个sessionID

所以我们需要在跨域的过程中允许请求携带cookie

Vue设置

此处以axios为例

//导入axios
import axios from 'axios';
//设置axios运行携带cookie发送跨域请求
axios.defaults.withCredentials = true;
//设置axios请求URL
axios.defaults.baseURL = "http://127.0.0.1:8081"

Springboot后端设置允许跨域

配置拦截器

/**
 * WEB拦截器配置
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {


    //设置拦截器
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //允许跨域
        registry.addInterceptor(new FilterConfig()).addPathPatterns("/**");

    }
}

配置允许跨域

/**
 * 允许跨域请求
 * @author 无缺
 */
@Component
public class FilterConfig implements HandlerInterceptor{

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //支持跨域请求,必须是具体的请求域
        response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
        //支持请求方式
        response.setHeader("Access-Control-Allow-Methods", "*");
        //是否支持cookie跨域
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type,         Accept,Access-Token");
        return true;
    }

    .....
}

发送axios请求

axios({
        url:'/info/getInfoData',
        type: 'GET',
      }).then(function(response){
        if (response.data.code == 200){
          that.resDate = response.data.data;
        }
      })

<font color=red>正常情况下到这里就能访问了,但是在使用过程中,如果访问 http://127.0.0.1:8081 的话还是会出现跨域不携带cookie的问题</font>

<font color=pink>此时应该访问 http://localhost:8080 </font>

最后修改:2021 年 12 月 15 日 10 : 07 PM
如果觉得我的文章对你有用,请随意赞赏