解决axios跨域问题的方法详解

小蓝 • 2024-11-12 00:53 • 编程

一、跨域问题解释

跨域问题是指在一个域名下，访问另一个域名的资源时出现了限制，这种限制是由浏览器实行了同源策略所引起的。

所谓同源即同协议、同域名、同端口，只要有一个不同就是跨域了。

二、常用解决跨域问题的方法

1. CORS（Cross-Origin Resource Sharing）

CORS基于HTTP头部添加可访问的域名地址来进行跨域请求，相对于自己上前端开发的人员只需配置请求后台API的路径即可。如下：


axios({
    method: 'get',
    url: 'https://api.apiopen.top/getJoke?page=1&count=2&type=video'
    withCredentials: true //后端要设置Access-Control-Allow-Credentials: true 才能访问
}).then(res=> {
      console.log(res)
})

其原理是在浏览器中发起请求时，在请求头部中添加Origin字段标记本次请求的来源域名，服务器端在处理请求之后添加Access-Control-Allow-Origin: *标识跨域接受哪些域名可以带cookie发出请求。

2. 代理

webpack代理，或者前段nginx代理，可以让请求变成本地请求来解决跨域问题，也能防止客户端请求时直接访问第三方服务器；同时请求的代理也可以在本地开发时模拟接口数据。


"proxy": {
    "/api": {
      "target": "https://api.apiopen.top", //代理的后台
      "changeOrigin": true,
      "pathRewrite": {"^/api": ""}//这个不解释
    }
}

3. JSONP

JSONP利用的是页面的script标签跨域请求不受浏览器同源策略的限制来获取数据，通过写回调函数，数据会当做参数传递到回调函数中，再通过回调函数来操作拿到的数据。

4. nginx反向代理

nginx可以做网关，同时也作为反向代理，将请求按照配置转发到对应的后台服务器，同时可以在nginx上设置CORS。

5. postMessage通信

window.postMessage(message, targetOrigin)方法是用来来自不同域的窗口之间的通信的。例如，假设文档 A 包含一个，该来自文档 B，如果在的 Javascript 中调用了 window.postMessage() 方法，那么，文档 A 中用于监听的 JavaScript 代码能够接收到消息。

三、实际应用

根据实际情况选择使用以下解决跨域问题的方式，对于后端设置了CORS的情况可以直接使用axios，对于不允许前端直接访问后端接口的情况使用代理，对于只支持JSONP方式的可以使用第三方库jsonp引用，对于已经有nginx服务器的可使用nginx反向代理，对于iframe嵌套的，可以使用postMessage或者window.name进行传递数据。

这里是示例代码，使用CORS和代理解决Axios跨域问题的实现：

CORS方式


axios({
  url: "https://api.apiopen.top/getJoke",
  method: "get",
  withCredentials: true,
  headers: { "Access-Control-Allow-Origin": "*" }
}).then(res => {
  console.log(res.data);
});

代理方式


axios({
  url: "/api/getJoke",
  method: "get"
}).then(res => {
  console.log(res.data);
});

以上就是解决axios跨域问题的几种方式了，根据实际需求进行选择。希望可以为大家提供帮助。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/151939.html