axios解决跨域原理（axios基本使用及跨域问题详解）

前端请求自然也发展迅速 
    
    
  ，从原生的XHR到jquery ajax
     


     


     
，再到现在的axios和fetch 
    
    
  。axios（ https://axios-http.com/zh/ ）是Vue推荐的http库 




 




 




，这个还是要了解一点的
     


     


     
。

安装 $ npm install axios

基本使用的例子

1 
    
    
  、在main.js中（肯定得创一个Vue脚手架的工程）import

import axios from axios

2
     


     


     
、使用axios

❌错误示范 import axios from axios const app = createApp(App) app.use(axios).mount(#app)

这种写法不支持, 因为 axios 是第三方库, 不是vue的插件

✅正确示范！！！

在原型上进行绑定, 直接写原型链 import { createApp } from vue import App from ./App.vue import router from ./router import axios from axios const app = createApp(App) app.config.globalProperties.$axios = axios app.use(router).mount(#app)

3 




 




 




、简单发起一个请求

注意：这是高德地图提供的一个天气接口 

   

   

 ，高德接口已经把跨域的问题解决好了
     

     

     ，允许跨域 //高德接口已经把跨域的问题解决好了  




  




  




，允许跨域 this.$axios({ url:`https://restapi.amap.com/v3/weather/weatherInfo?key=5737f6640c7a33f8fb22a952b298946b&city=340104`, }).then((res) => { console.log(res) }).catch((error)=>{ console.log(error); });

封装axios

1 

   

   

 、直接用axios不好吗？为什么要封装？

说直白一点 


  


  


，就是接口不同时改个域名就行了
     

     

     、可以统一管理请求  




  




  




、条例清晰 


  


  


、好维护

2
     
     
     、怎么封装

要注意res是浏览器对请求响应的处理结果
     
     
     ，res.status是http状态码   




   




   



，这是超文本传输协议响应状态的3位数字代码 



 



 



，在RFC 2616中规定好了              ，只有在data里面的status才能自己规定判断 import axios from "axios" //创建一个axios对象 const http = axios.create({ timeout: 5000 }) //设置请求的拦截器 http.interceptors.request.use(config => { // 在这里
    




    




    


，可以配置请求头   




   




   



、token等信息 return config }, error => { console.log(error); return Promise.reject(error) }) //设置响应的拦截器 http.interceptors.response.use(res => { //返回的响应数据 /** * res是浏览器对请求响应的处理结果














，res.status是http状态码              ， * 这是超文本传输协议响应状态的3位数字代码
     



     



     

，在RFC 2616中规定好了 * 只有在data里面的status才能自己规定判断 */ console.log(res) console.log(res.data) const data = res.data if (res.status == 200) { if (data.status == 1 || data.status == 1000) { return Promise.resolve(data) } else { console.log(data) return Promise.reject(data) } } }, error => { if (error.response.status) { switch (error.response.status) { case 404: alert("请求路径找不到！") break; case 500: alert("服务器内部错误！") break; default: break; } } return Promise.reject(error) }) export default http

3 



 



 



、封装完怎么用？

同样














，把封装好的axios实例加到原型上 import request from @/utils/request const app = createApp(App) app.config.globalProperties.$request = request app.mount(#app)

之后请求

//自己封装的axios 
    
    
  ，这个接口同样直接允许跨域 this.$request({ url:`http://wthrcdn.etouch.cn/weather_mini?city=%E5%BC%8B%E6%B1%9F`, }).then((res) => { console.log(res); }).catch((error)=>{ console.log(error); })

有关跨域的问题

1              、什么是同源策略？

同源策略/SOP（Same origin policy）是一种约定
     


     


     
，由Netscape公司1995年引入浏览器 




 




 




，它是浏览器最核心也最基本的安全功能 

   

   

 ，如果缺少了同源策略
     

     

     ，浏览器很容易受到XSS
    




    




    


、CSFR等攻击 




 




 




。所谓同源是指 协议+域名+端口 三者相同  




  




  




，即便两个不同的域名指向同一个地址 


  


  


，也非同源 

   

   

 。

2














、什么是跨域？

当一个请求url的 协议              、域名
     



     



     

、端口 三者之间任意一个 与当前页面url不同 即为跨域

比如我现在有一个自己写的接口

http://localhost/allPHPcode/starbuckBackend/menu.php

它返回menu的json数据

现在向它发起请求 //自己写的一个接口
     
     
     ，不允许跨域 this.$axios({ url:`localhost/allPHPcode/starbuckBackend/menu.php` }).then((res) => { console.log(res); }).catch((error) => { console.log(error); })

报错

端口号不同   




   




   



，存在跨域

3














、解决办法一——允许跨域

查看请求自己写的menu接口时的网络面板

查看请求天气接口时的网络面板

对比就可以发现 



 



 



，如果要允许跨域              ，在php顶部加上以下header即可 // 跨域问题处理 header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE"); header(Access-Control-Allow-Headers:x-requested-with,content-type);

添加header后再次请求

4 
    
    
  、解决办法二——代理

通过中间件来解决跨域问题
    




    




    


，浏览器有跨域限制














，但是服务器没有跨域限制              ，所以中间件其实就是服务器（服务器对数据进行了转发而已）

首先在vue.config.js文件里配置一下

const { defineConfig } = require(@vue/cli-service) module.exports = defineConfig({ transpileDependencies: true, devServer:{ proxy:{ /localhost:{ //这个就是的标识
     



     



     

，当接口用 localhost 开头才用代理 target:http://localhost, //这是代理到哪里 pathRewrite:{ ^/localhost:}, //这个是路径重写














，比如代理的标识是 localhost 
    
    
  ，但是要请求的路径里没有 localhost 这个字符串
     


     


     
，所以用pathRwrite把 localhost 换成空字符串 




 




 




，也就是删掉 

   

   

 ，之后再拼到target上就合适了 changeOrigin:true //开启代理：在本地会创建一个虚拟服务端
     

     

     ，然后发送请求的数据  




  




  




，并同时接收请求的数据 


  


  


，这样服务端和服务端进行数据的交互就不会有跨域问题 } } } })

再次发起请求
     
     
     ，问题解决

关于pathRewrite可以看这两篇文章

[1]:https://juejin.cn/post/7041441723238580238

[2]:https://www.cnblogs.com/hanguidong/p/9460495.html

以上例子的源码：https://github.com/AnnGreen1/axios-demo