背景
公司最近有这样一个需求,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 详解
原文地址:https://www.cnblogs.com/Krloypower/p/9249902.html