Vue跨域请求处理

Axios部署跨域

针对网络请求的处理#

// 指定 axios 请求类型
axios.defaults.headers = {
	"Content-Type": "application/json;charset=utf-8",
	'Access-Control-Allow-Origin': "*",
	'Access-Control-Allow-Credentials': "true",
	'Access-Control-Allow-Methods': "POST, GET, OPTIONS, DELETE, PUT",
	'Access-Control-Allow-Headers': "x-requested-with, Content-Type, origin, authorization, accept, client-security-token",
};

v针对Chrome的处理#

49版本之前  --disable-web-security
49版本之后 --disable-web-security --user-data-dir=D:\MyChromeDevUserData 

Nginx设置#

//nginx.conf
server {
    listen       81;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
        add_header Access-Control-Allow-Headers *;
    }
}

后端来支持跨域#

//配置Configuration
@Configuration
public class GatewayCorsConfiguation {
 
    @Bean
    public CorsFilter corsFilter(){
        // 初始化cors配置对象
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowCredentials(true); // 允许使用cookie，但是使用cookie是addAllowedOrigin必须是具体的地址，不能是*
//        configuration.addAllowedOrigin("*");
        configuration.addAllowedOrigin("http://manage.leyou.com");
        configuration.addAllowedMethod("*");  //允许的请求方式,get,put,post,delete
        configuration.addAllowedHeader("*");//允许的头信息
 
        //初始化cors的源对象配置
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**",configuration);
 
        //3.返回新的CorsFilter.
        return new CorsFilter(corsConfigurationSource);
    }
}
//注解
@CrossOrigin(origins = "*")