浏览器跨域问题以及常用解决方案

跨域的根本原因就是因为浏览器的同源策略，这是浏览器出于安全性考虑做出的限制，所谓同源是指：域名、协议、端口相同。

比如在互联网上有两个资源（网页或者请求等），如果A想要访问B的资源，如果A、B并非同源，即域名、协议、端口有任意一个不相同，那么就会出现跨域问题。

跨域的表现即是在浏览器控制台中报类似于下图中的错误。

No'Access-Control-Allow-Origin'headerispresentontherequestedresource.

下面是常见的几种跨域的情况，除了前两种都会出现跨域问题

分享几个比较常用的解决跨域的办法

对于Java后端来说，如果你使用的是SpringBoot来开发项目，那么解决跨域会非常的方便，只需要在需要开启跨域支持的借口的控制层，就是是常说的Controller，添加类注解：@CrossOrigin，如下

@CrossOrigin@RestControllerpublicclassHelloController{//具体请求}

SpringBoot也可以编写一个专门的配置类来解决跨域的问题，即CorsConfig，这样做的好处就是不需要每一个Controller添加@CrossOrigin注解

;;;@ConfigurationpublicclassCorsConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddCorsMappings(CorsRegistryregistry){("/**").allowedOrigins("*").allowCredentials(true).allowedMethods("GET","POST","PUT","DELETE","OPTIONS").maxAge(3600);}}

还有一种方法也可以解决跨域问题，就是利用过滤器来解决，代码如下

@ComponentpublicclassCORSFilterimplementsFilter{@Overridepublicvoidinit(FilterConfigfilterConfig)throwsServletException{}@OverridepublicvoiddoFilter(ServletRequestservletRequest,ServletResponseservletResponse,FilterChainfilterChain)throwsIOException,ServletException{HttpServletResponseresponse=(HttpServletResponse)servletResponse;("Access-Control-Allow-Origin","*");("Access-Control-Allow-Methods","POST,GET,OPTIONS,DELETE");("Access-Control-Max-Age","3600");("Access-Control-Allow-Headers","x-requested-with");(servletRequest,servletResponse);}@Overridepublicvoiddestroy(){}}

以上三种方法都可以实现对跨域的支持，个人最推荐使用第一种注解的方式，简单粗暴！

在Vue的项目中可以使用配置代理的方式解决跨域问题，以版本为例

这里后端端口8888，暴露一个moti-memo/hello请求，前端端口为8080，通过上文可知，在前后端均不处理的情况下，端口不同肯定会发生跨域问题。

exportdefault{
name:'App',
created(){
this.$("http://localhost:8888/moti-memo/hello").then(res={
();
})
}
}

前端配置代理的方式也很简单，编辑config/配置文件，在dev对象的proxyTable属性配置代理信息，如下

={dev:{//PathsassetsSubDirectory:'static',assetsPublicPath:'/',proxyTable:{'/api':{target:'',changeOrigin:true,pathRewrite:{'^/api':''}}},

这里可以看到我们配置了/api前缀的代理，之后我们只需要在使用axios发送请求的时候把原来跨域的请求IP+端口替换成/api。

scriptexportdefault{name:'App',created(){this.$("/api/moti-memo/hello").then(res={();})}}/script

在Vue-cli的3.X版本中，配置文件变为了，我们需要编辑这个配置文件，在devServer对象的proxy属性加入代理信息，参考如下

={lintOnSave:false,devServer:{proxy:{'/api':{target:'',changeOrigin:true,pathRewrite:{'^/api':''}}}}}

使用Nginx配置反向代理也是可以帮助我们解决跨域问题的，只需要修改nginx的配置文件，参考如下

server{listen9000;server_namelocalhost;location/api/{rewrite^/api/(.*)$/$1break;#跨域服务的地址proxy_pass;}}

前端所有对跨域服务的请求都加一个/api前缀，Nginx做代理的时候会移除/api前缀。例如：请求路径为/api/hello的请求将会访问。

/p/8fa2acd103ea