vue问题记录- 1.Cli4中跨域请求问题-在vue中解决

• 案发现场：

​ 前端地址：localhost:8088

​ 请求的服务器地址：localhost:3333

​ 当前端向服务器地址发送请求时报错，提示跨域，禁止访问（403）。

• 解决方案：vue-config.js

  • 首先在项目下创建vue.config.js文件，与package.json同级。跨域设置如下devServer中proxy的配置。

    module.exports = {
        //路径别名配置
    	configureWebpack: {
    		resolve: {
    			alias: {
    				assets: "@/assets",
    				common: "@/common",
    				components: "@/components",
    				network: "@/network",
    				views: "@/views"
    			}
    		}
    	},
    	devServer: {
    		host: 'localhost',
    		port: 8088,
    		//跨域配置
    		proxy: {
    			'/xaiform': {
    				target: 'http://localhost:3333', // 要跨域的域名
    				changeOrigin: true, // 是否开启跨域
    			},
    			'/go': {
    				target: 'http://localhost:3333', // 要跨域的域名
    				changeOrigin: true, // 是否开启跨域
    			}
    		}
    	}
    };
    

  • 请求方式：下面的请求方式为做过封装的axios（不管这里）。

  ​ 当请求/xaiform/basicselect接口时，会被上面的代理拦截，并将/xaiform/basicselect拼接到target的后面（http://localhost:3333/xaiform/basicselect）进行访问。

  //1、请求/go接口
  export function requestUserInfo(){
  	return request({
  		url:'/xaiform/basicselect',
  		method:'post',
  		data:{}
  	});
  }
  

问题解决

补充：

​ 如果后台服务器是自己写的也可以在后端设置跨域问题。下面是SpringBoot的跨域解决方式。@Configuration

package com.zwd.blog.config;

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;
/**
 * 跨域配置
 * @author Administrator
 *
 */
@Configuration  
public class CorsConfig {  
    private CorsConfiguration buildConfig() {  
        CorsConfiguration corsConfiguration = new CorsConfiguration();  
        corsConfiguration.addAllowedOrigin("*"); // 1允许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 2允许任何头
        corsConfiguration.addAllowedMethod("*"); // 3允许任何方法（post、get等） 
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;  
    }  
  
    @Bean  
    public CorsFilter corsFilter() {  
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();  
        source.registerCorsConfiguration("/**", buildConfig());  
        return new CorsFilter(source);  
    }  
}