Vue项目跨域问题

1.如何理解跨域

跨域的本质就是浏览器基于同源策略的一种安全手段。

同源必须有以下三个相同点：协议相同、主机相同、端口相同。任何一项不同即非同源请求，就会产生跨域。

2.CROS

​ CROS（Cross-Origin Resource Sharing），即跨域资源共享。它由一系列传输的HTTP头组成，这些HTTP头会决定浏览器是否阻止前端 JavaScript代码获取跨域请求的响应。根据该结构，在实现时只需要增加一些 HTTP头，让服务器声明允许的访问来源，只要后端实现了 CROS就实现了跨域。

3.CROS后端实现

package com.zgj.springboot.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;

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        //设置哪些请求路径允许跨域
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        //跨域策略设置
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}