因为浏览器采用了同源策略,即协议、域名地址、端口号必须全部相同所以浏览器不能执行其他网站的脚本。但是有时候又必须要使用来自另一网站的数据,所以出现了跨域请求。那么怎样解决呢?
一、使用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');//允许访问的方式
网友评论