前端关于跨域问题的解决

前端关于跨域问题的解决

首先我们要明白什么是跨域，跨域的实质便是同源策略需要 协议，主机名，端口一致

解决方案大致分为三种

1.cors

https://www.jianshu.com/p/e79024ba9cc7

需要后端人员在返回结果中做操作，通知浏览器把数据给到前端

在SpringBoot中解决跨域的三种方法

1.在方法体上添加@CrossOrigin的注解
response.addHeader( “Access-Control-Allow-Origin”, “http: / /127.0.0.1:8081”);
response.addHeader( “Access-Control-Max-Age” , “10"”);
response.addHeader( Access-Control-Allow-Headers", “get,put”);

2.全局过滤类
.addMapping(“/api/**”)
.allowedOrigins(“https://xttblog.com”)
.allowedMethods(“PUT”, “DELETE”)
.allowedHeaders(“weixin”, “codedq”, “header3”)
.exposedHeaders(“header1”, “header2”)
.allowCredentials(true).maxAge(3600);

3.实现WebMvcConfigurer 接口

2.JSONP

只能解决get问题的跨域，感觉较为鸡肋。

需要前后端都做操作

3.代理服务器形式

代理服务器主要有两种，

1.nginx

2.vue-cli

官网参考

https://cli.vuejs.org/zh/config/#devserver-proxy

在vue.config.js 加入

a.

devServer: {
    proxy: 'http://localhost:8081'//代理转发服务器地址
  }

以后调用资源也调用localhost：8080 代理服务器地址而不是真正8081的地址

axios.get(''http://localhost:8080/getData').then(
response=>{

},
error=>{

}
)

优点：配置简单

缺点 这也导致了不够灵活，无法去控制是否走代理，优先匹配前端资源

b.

 devServer: {
    proxy: {
      '/api': { //请求前缀，使用前缀则使用代理服务器
        target: 'http://localhost:8081',
		pathRewrite:{'^/api':''}, 				//将请求体的多余路径删除
        ws: true,								//用于支持websocket
        changeOrigin: true 						//模拟服务器端口号8081  false为前端端口号8080
      },
      '/foo': {										
        target: 'http://localhost:8082'，		//配置多台服务器
		pathRewrite:{'^/foo':''}, 	
      }
    }
  }

axios.get(''http://localhost:8080/api/getData').then(
response=>{

},
error=>{

}
)

优点：可配置多代理，且灵活

缺点：稍微繁琐，请求资源需加前缀