axios.get绕过同源策略的限制。
时间: 2023-08-11 18:51:02 浏览: 46
使用axios发送跨域请求需要在请求头中添加`Access-Control-Allow-Origin`来允许跨域访问,但是由于这个请求头是服务器端返回的,客户端无法直接添加,所以需要通过其他方式来绕过同源策略的限制。
一种常见的方法是使用JSONP(JSON with Padding)技术。JSONP是一种跨域数据请求的解决方案,它利用了script标签不受同源策略限制的特性,将需要获取的数据包装在一个回调函数中,然后通过script标签引入远程脚本,从而获取数据。
以下是一个使用axios和JSONP的示例代码:
```js
import axios from 'axios';
axios.jsonp('https://h5vv.video.qq.com/getinfo', {
params: {
vids: vid,
platform: 101001,
charge: 0,
otype: 'json',
defn: 'sd',
callback: 'jsonpCallback'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
function jsonpCallback(data) {
console.log(data);
}
```
在上面的代码中,我们使用axios.jsonp()方法来发起跨域请求,并将请求的URL和参数作为参数传递给该方法。在参数中,我们需要指定一个callback参数来指定回调函数的名称,该回调函数的名称需要在服务端进行处理后返回给客户端。
在服务端处理请求时,需要根据callback参数的值将响应数据包装在一个函数中返回给客户端。例如,在Node.js中可以使用如下代码实现:
```js
const callbackName = req.query.callback;
const responseData = { /* 响应数据 */ };
const responseString = `${callbackName}(${JSON.stringify(responseData)})`;
res.send(responseString);
```
在客户端,我们需要定义一个与服务端返回的回调函数名称相同的函数(如上述代码中的jsonpCallback函数),该函数会在服务端返回的数据中被调用,并将响应数据作为参数传递给它。