美文网首页前端
处理跨域的三种方式

处理跨域的三种方式

作者: 微笑是我_f8bb | 来源:发表于2018-12-27 19:57 被阅读0次

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

    一、使用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');//允许访问的方式

    相关文章

      网友评论

        本文标题:处理跨域的三种方式

        本文链接:https://www.haomeiwen.com/subject/dicdlqtx.html