> 文章列表 > 跨域问题怎么解决

跨域问题怎么解决

跨域问题怎么解决

解决跨域,原因:域名不同,域名相同端口不同;二级域名不同

什么是跨域?

就是两个项目之间通讯,如果访问的域名与ajax访问的地址不一致情况,默认情况浏览器有一个安全机制。
postman不一定能测试出来,因为postman是存调用,没有浏览器那种安全机制也叫安全策略。报错可能为
No 'Access-Control-Allow-Origin' header is present on the requested resource.如果a,b页面的协议、域名、端口、子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是说不允许跨域请求资源。因为浏览器收到不同的域名,不同端口,不同协议不允许共享资源的,保障浏览器安全。同源策略是针对浏览器设置的门槛。

解决的方式有很多

 包括网上的解决方案有很多,比较高级的微服务解决方案可能是网关和nginx层面了设置响应头允许跨域(可以推荐,适合于小公司快速解决问题)
使用nginx搭建api网关接口(强烈推荐)因为保证域名和端口都一致
使用Zuul微服务搭建API网关(强烈推荐)SpringCloud1、网关 市场流行的gateway zuul2、implements WebMvcConfigurer 如下面代码

@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping(“/”)
.allowedOrigins(““)
.allowedMethods(“POST”, “GET”)
.maxAge(168000)
.allowedHeaders(”
”)
.allowCredentials(true);
}
}

3、nginx配置跨域
nginx需要后端、前端一块来配置,广泛应用在微服务 分布式 高并发的业务场景中
原理很简单,就是中介带有网关,客户端去请求网关,而不是直接请问接口,
网关有点像代理,代理第一层请求的压力,然后转发给不同的项目或者服务。
原理还是保证域名和端口号都是相同的。
根据项目不同名称使用nginx进行转发到服务器地址中。
同时解决了安全问题,是微服务常用的手段之一。
配置nginx
server {
listen 80;
##授权从www.xxx.com的请求
server_name www.xxx.com;

	A项目location /a {proxy_pass   http://a.xxx.com:8080/;index  index.html index.htm;}B项目location /b {proxy_pass   http://b.xxx.com:8081/;index  index.html index.htm;}
}

前端代码

4、 设置响应头跨域
@RequestMapping(“/ajaxB”)
public Map<String, Object> ajaxB(HttpServletResponse response) {
response.setHeader(“Access-Control-Allow-Origin”, “*”);
Map<String, Object> result = new HashMap<String, Object>();
result.put(“errorCode”, “200”);
result.put(“errorMsg”, “登陆成功”);
return result;
}
5、单个接口实现的也有@CrossOrigin 加注解 局域与某个controller或接口
6、其他方案有很多
比如自定义过滤器,设置过滤跨域命题
比如HandlerInterceptor方法拦截器跨域解决
当然前端层面也是可以解决的哈