vue跨域问题处理

前后端分离开发,开发完打包放入springboot部署。vue跨域问题的处理。

方法一：代理服务器（完美解决）

使用代理服务器可以在开发环境解决跨域，但一旦打包放到springboot里，开发环境配置的代理服务器就不管用了。

所以axiso请求的base_url不能写死，需要动态获取。根据浏览器中输入的地址来获取base_url。

let SQIMS_request =axios.create({

    baseURL: window.location.protocol+'//'+window.location.host,

})

这里的window.location.host获取到的值是不带http://的。

这样子设置后，后端无需做任何跨域设置

方法二：前后端配置跨域（有点问题）

前端设置：

let SQIMS_request =axios.create({

    baseURL: window.location.protocol+'//'+window.location.host,

    withCredentials:true  //开启凭证，axios在请求的时候会携带 JSESSIONID,用以shiro验证。如无需验证，则不设置此项。配合后端全局跨域设置，也可解决跨域问题

})

后端设置

后端全局跨域配置

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;

/**

* 跨域配置,允许跨域

*/

public class GlobalCorsConfig {

    private CorsConfiguration buildConfig() {

        CorsConfiguration corsConfiguration = new CorsConfiguration();

        corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用

       // corsConfiguration.setAllowCredentials(true);

        corsConfiguration.addAllowedHeader("*"); // 允许任何头

        corsConfiguration.addAllowedMethod("*"); // 允许任何方法（post、get等）

        return corsConfiguration;

    }

    public CorsFilter corsFilter() {

        UrlBasedCorsConfigurationSource source = new         UrlBasedCorsConfigurationSource();

        source.registerCorsConfiguration("/**", buildConfig()); // 对接口配置跨域设置

        return new CorsFilter(source);

    }

}

withCredentials开启后，后端全局跨域配置的

corsConfiguration.addAllowedOrigin("*");

就失效了。

需要指定具体的host。例如

corsConfiguration.addAllowedOrigin("http://127.0.0.1:8080");

并且开启

corsConfiguration.setAllowCredentials(true);

但此方法未能奏效，且没法根据请求的host动态设置。

也可以采用跨域过滤器，在响应时，动态设置 headers

import org.springframework.stereotype.Component;

import javax.servlet.*;

import javax.servlet.annotation.WebFilter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

//@Component

//@WebFilter(urlPatterns = "/*", filterName = "CorsFilter")

public class CorsFilter implements Filter {

    @Override

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse) res;

        HttpServletRequest reqs = (HttpServletRequest) req;

        String curOrigin = reqs.getHeader("Origin");

        response.setHeader("Access-Control-Allow-Origin", curOrigin == null ? "true" : curOrigin);

        response.setHeader("Access-Control-Allow-Credentials", "true");

        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");

        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

        chain.doFilter(req, res);

    }

    @Override

    public void init(FilterConfig filterConfig) {

    }

    @Override

    public void destroy() {}

}

似乎也未奏效

方法三

使用 jwt(sqims2采用的方式) + 后端全局跨域配置

此方式不需要代理服务器了,而且前后端无论是打包部署还是分别部署均可使用

备注

如果是前后端分离部署，

方法一