处理跨域的三种方式

因为浏览器采用了同源策略,即协议、域名地址、端口号必须全部相同所以浏览器不能执行其他网站的脚本。但是有时候又必须要使用来自另一网站的数据,所以出现了跨域请求。那么怎样解决呢?

一、使用jsonp  

jsonp的原理实际上是利用了script标签的src属性能跨域引入(访问)js的特性,动态创建script标签(script标签只会加载一次,所以需要动态创建),并且在本地全局声明一个函数,用来接收文件里面函数调用时传递的数据数据。

值得注意的是jsonp只能使用get请求,不能使用post请求。

以jquery的jsonp为例 请求百度搜索的开放接口


二、代理 

例如www.123.com/index.html需要调用www.456.com/server.php,可以写一个接口www.123.com/server.php,由这个接口在后端去调用www.456.com/server.php并拿到返回值,然后再返回给index.html,这就是一个代理的模式。相当于绕过了浏览器端,自然就不存在跨域问题。

虽然通过服务器转发请求可以达到跨域请求的目的,但是增加服务器的负担,且访问速度慢。

以在vue-cli项目中使用为例

在config目录下的index.js文件中找到proxyTable


这里是以‘/api’代替目标路径http://localhost

使用时/api/+接口


三、CORS 

在访问的路径的后台设置响应头,让前端可以访问。

header('Access-Control-Allow-Origin:*');//允许所有来源访问

header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言部分 一、跨域是什么? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源(广义的)。 广义的跨域场景有以...
    爆发吧小宇宙阅读 3,342评论 0 12
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    Yaoxue9阅读 1,364评论 0 6
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    他方l阅读 1,097评论 0 2
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    HeroXin阅读 873评论 0 4
  • 由于浏览器的同源策略保护机制,浏览器不能执行来自其他来源的脚本。通过js在不同的域之间进行数据传输或通信,比如用a...
    威少_吴阅读 1,430评论 0 2