跨域问题实战

Posted 2020-11-21 krloypower

背景

公司最近有这样一个需求，XXX用前后端分离的技术实现。用Restful api风格。

问题出现

写好的http接口提供给前段人员处理出现如下图：错误图一

$$错误图一1$$

错误描述:
no Access-Control-Allow-Origin is present on the requested resource. Orgin ‘http:localhost:8080‘ is therefore not allowed access
字面意思是 没有访问控制允许源在请求的资源上。没有源在‘http:localhost:8080‘上所以不允许访问。

排查

从问题的描述上可以知道，这一次Http请求资源没有成功，原因是请求的资源不允许。这边我提供的http接口是没有设置限制的，于是我问前段的人是怎么调用的这个接口。原来他是通过Ajax来进行请求的，并且还是两个不同的项目，瞬间恍然大悟，跨域问题。

解决

方案一：客户端用JSONP处理
通过ajax请求中的dataType:‘JSONP‘来解决

$.ajax({
    url: 'xxxx',
    dataType : 'JSONP',
    type : 'GET',
    .....: '....',
    success : function(msg){
    }
})

可以通过这个方案来解决，但是局限性是跨域请求只支持GET请求。

方案二：服务端设置返回的HTTP请求头部允许该网站访问。
response.setHeader("Access-Control-Allow-Origin","你允许让别人访问你这次http请求链接的地址 eg:www.baidu.com");

防止

以后在进行做前后端分离的任务的时候，两个项目并且不是在相同的域名下面的时候，一定会有跨域的问题。如果你整的这个项目都是用来给前段提供http接口的时候，你可以设置过滤器来进行这个跨域操作。

精华

其实这都只是简单的http请求，那么当在进行复杂的http请求的时候，由应该怎么操作呢，其实也是有解决的办法的

方案一：服务端设置返回http头部允许该网站的复杂请求
通过response.setHeader("Access-Control-Allow-Headers","头部类型")

建议可以看一下该博客，会有很大的帮助
本博客地址 ：https://www.cnblogs.com/Krloypower/p/9249902.html
跨域资源共享 CORS 详解