浅谈前端跨域

2018-12-231973
秦泽森
web研发

1.同源策略 同源是指协议、域名、端口号一致。不一致时便产生跨域行为。 工作中遇到的一些误区:在本地启动服务器,后在本地的浏览器中去访问服务器的接口,会以为没有产生跨域。实际上去判断有没有跨域要严格的观察协议、域名、和端口号是否一致,最容易被忽略的是端口号这一项。一般本地启动服务器都不会以80端口作为服务器端口号,而浏览器默认的端口号是80,所以是会产生跨域问题的。 2.http请求 http的请求有许多种:

  • GET 请求指定的页面信息,并返回实体主体。
  • HEAD 类似于get请求,只不过返回的响应中没有具体的内容,用于获取报头
  • POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
  • PUT 从客户端向服务器传送的数据取代指定的文档的内容。
  • DELETE 请求服务器删除指定的页面。
  • CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
  • OPTIONS 允许客户端查看服务器的性能。
  • TRACE 回显服务器收到的请求,主要用于测试或诊断。

2.跨域下的预请求 跨域情况下的请求分为简单请求和非简单请求 简单请求的条件如下: (1) 请求方法是以下三种方法之一:HEAD、GET、POST (2)HTTP的头信息不超出以下几种字段:Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type(只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain) 只要有超过上述条件的请求都是非简单请求。而非简单请求会向服务器发送一个预请求(OPTIONS),在服务器通过预检测请求之后客户端便会发送真正的请求给服务器。 3.在跨域下通信的方式 跨域下的通信方式需要客户端和服务器端双方协调进行解决。

  • jsonp 利用script标签进行跨域请求,需要和服务器端协调好回调函数的返回和调用。
  • cors 服务器通过设置Access-Control-Allow-Origin响应头来允许指定的请求源对自己的请求访问。
  • 代理服务器 代理服务器的本质是服务器之间的请求并没有同源策略,同源策略只存在于浏览器和服务器之间。所以可以通过使用代理服务器的方式解决跨域问题,但是在浏览器和代理服务器之间仍然会产生跨域现象,需要通过上面的jsonp、cros方式去进行通讯。这种方式可用于对第三方服务的访问产生跨域的解决。

作者简介:莫冥,芦苇科技web前端开发工程师 专注于前端领域框架、交互设计、图像绘制、数据分析等研究,访问 www.talkmoney.cn 了解更多。

分享
点赞0
打赏
上一篇:代理工具Fiddler -调试与替换接口状态
下一篇:深拷贝和浅拷贝