码迷,mamicode.com
首页 > 其他好文 > 详细

跨域问题实战

时间:2018-07-01 14:14:32      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:实现   www.   服务端   request   class   别人   html   客户端   控制   

背景

公司最近有这样一个需求,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 详解

跨域问题实战

标签:实现   www.   服务端   request   class   别人   html   客户端   控制   

原文地址:https://www.cnblogs.com/Krloypower/p/9249902.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!