浅谈跨域的几种解决方案

提到跨域，得先了解什么是同源策略，它是浏览器最核心也是最基本的安全功能。在执行Ajax请求时必须满足同源策略，否则浏览器控制台会报类似于如下的错误信息：

Access to XMLHttpRequest at 'http://localhost:8800/test1' from origin 'http://localhost:8801' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

同源即协议、域名、端口号三者必须都相同，有任意一个不同则为非同源，在Ajax请求非同源的地址时即为跨域。

前端：http://localhost:8801
后端：http://localhost:8800

利用src不受同源策略的影响 ，可以访问其他页面的数据。jsonp由两部分组成，数据与回调函数，其中当收到响应时会点函数触发。

vue-cli中引入axios：

cnpm install axios --save

然后在main.js中引入axios

import axios from 'axios'

Vue.prototype.$axios = axios
//配置请求路径
axios.defaults.baseURL = '/api/'

接下来在config/index.js中配置proxyTable如下：

dev: {
    proxyTable: {
      '/api/': {
        target:'http://127.0.0.1:8800/', // 请求的第三方接口
        changeOrigin:true, //创建虚拟服务端解决跨域
        pathRewrite:{  //重写路径
          '^/api/': ''
        }
      }
    },
}

之后编写axios的get请求：

methods: {
   hello () {
     // this.$axios.get('http://localhost:8800/test1')
     //这里的test1即为http://localhost:8800/test1
     this.$axios.get('test1')
       .then(function (resp) {
         alert('成功返回' + resp.data)
         console.log(resp)
       }).catch(function (error) {
         console.log(error)
       })
   }
 }

@CrossOrigin等同于@CrossOrigin("*")，都表示任意地址，具体可使用@CrossOrigin({"http://localhost:8801"})。

在控制层请求接口的方法上加上该注解即可

@CrossOrigin()
@RequestMapping("/test1")
public String test1() {
    System.out.println("请求test1");
    return "test1";
}

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() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");	//所有来源
        config.addAllowedMethod("*");	//所有方法（get、post等）
        config.addAllowedHeader("*");	//所有请求头
        config.setAllowCredentials(true);	//支持Cookie
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        //为所有路径开启跨域
        source.registerCorsConfiguration("
@Configuration
public class CorsConfig {
    @Bean
    public CorsWebFilter corsWebFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 允许的请求头
        config.addAllowedHeader("*");
        // 允许的HTTP方法
        config.addAllowedMethod("*");
        // 允许的来源
        config.addAllowedOrigin("*");

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        // 允许访问的资源
        source.registerCorsConfiguration("/**",config);

        return new CorsWebFilter(source);
    }
}

server {
    listen 8080;
    server_name localhost;
    location / {

        proxy_pass http://localhost:8800;

        # 允许 所有头部 所有域 所有方法
        add_header 'Access-Control-Allow-Origin' '*';
        #add_header 'Access-Control-Allow-Headers' '*';
        #add_header 'Access-Control-Allow-Methods' '*';
        #if ($request_method = 'OPTIONS') {
        #    return 204;
        #}
    }
}

先复制一份谷歌浏览器的快捷方式，我们把它就改名为“跨域chrome”，还需要新建一个文件夹，这里新建在E盘命名为“ChromData”，然后右键谷歌浏览器图标打开属性，编辑目标，结尾加入 --disable-web-security --user-data-dir=E:ChromeData，如下图：

应用后可打开浏览器有如下提示表示修改成功：

该方式一般用于本地测试时。