基于Vue的前后端分离的项目中解决跨域问题

一、前端反向代理解决跨域

在环境配置文件.env.development/staging/production中配置
请求路径的前缀

VUE_APP_BASE_API = '/dev-api'

然后在request.js中封装请求方法中通过baseURL引用公共URL

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: process.env.VUE_APP_BASE_API,// 超时timeout: 10000
})

调用请求方法：

request({url: '/captchaImage',headers: {isToken: false},method: 'get',timeout: 20000})

反向代理配置：
在vue.config.js中配置：

//监听80端口
const port = process.env.port || process.env.npm_config_port || 80 // 端口module.exports = {devServer: {host: '0.0.0.0',port: port,open: true,proxy: {[process.env.VUE_APP_BASE_API]: {//将访问公共路径的请求转发到8080端口target: `http://localhost:8080`,changeOrigin: true,pathRewrite: {//将VUE_APP_BASE_API的公共路径替换为空//请求为http://localhost/dev-api/login//实际为http://localhost:8080/login['^' + process.env.VUE_APP_BASE_API]: ''}}},disableHostCheck: true},{},}

二、后端配置文件解决跨域问题

1：在Springboot项目里加上这个配置文件CorsConfig.java，重启之后即可实现跨域访问，前端无需再配置跨域。

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;@Configuration
public class CorsConfig {// 当前跨域请求最大有效时长。这里默认1天private static final long MAX_AGE = 24 * 60 * 60;@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法corsConfiguration.setMaxAge(MAX_AGE);source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置return new CorsFilter(source);}
}

2、直接采用SpringBoot的注解@CrossOrigin

Controller层在需要跨域的类或者方法上加上@CrossOrigin注解即可。

3、处理跨域请求的Configuration：

CrossOriginConfig.java
继承WebMvcConfigurerAdapter或者实现WebMvcConfigurer接口

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;/*** AJAX请求跨域* @author Mr.W* @time 2018-08-13*/
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS).maxAge(3600);}
}

4、采用过滤器的方式

@Component
public class CORSFilter implements Filter {@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)throws IOException, ServletException {HttpServletResponse res = (HttpServletResponse) response;res.addHeader("Access-Control-Allow-Credentials", "true");res.addHeader("Access-Control-Allow-Origin", "*");res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {response.getWriter().println("ok");return;}chain.doFilter(request, response);}@Overridepublic void destroy() {}@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}
}

三、Nginx代理服务器解决跨域问题

1、前端同样配置好后端资源的请求路径的公共路径baseURL
2、将前端资源部署在nginx服务器下的html目录
3、配置nginx.conf文件:

 server {listen 80;server_name 你的主机IP;proxy_buffer_size 64k;proxy_buffers   32 32k;proxy_busy_buffers_size 128k;location / {root /usr/share/nginx/html;index index.html index.htm;try_files $uri $uri/ =404;}location /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://转发到IP:端口/;
}}