Go语言视频零基础入门到精通

admin

  
1.安装

1. npm install axios

复制代码

或者 使用 bower:

1. bower install axios

复制代码

或者直接使用 cdn:

1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

复制代码

  
2.引入axios

1. import axios from "axios"

复制代码

这时候如果在其它的组件中，是无法使用 axios 命令的。但如果将 axios 改写为 vue 的原型属性，就能解决这个问题

1. Vue.prototype.axios = axios

复制代码

通过 this.axios({})来访问
  
3.基本使用

1. axios({
2.       url:"http://localhost/api/aaa",
3.       method:"POST",
4.       headers:{
5.         Authorization:"Bearer eyJ0eXAiABUg-Fxs...",
6.         Accept:"application/json"
7.       }
8.     }).then(res=>{
9.       console.log(res,"res")
10.     }).catch(res1=>{
11.       console.log(res1,"res1")
12.     })

复制代码

然后报CORS错误
Access to XMLHttpRequest at "http://backend.com/api/aaa" from origin "http://localhost:8085" has been blocked by CORS policy: Response to preflight request doesn"t pass access control check: No "Access-Control-Allow-Origin" header is present on the requested resource.


根据提示可以看出是跨越了
跨越的三个条件：协议、域名、端口号
这个请求明显端口号不一致，找到问题了，那就好说了
  
4.axios配置 proxyTable
在config/index.js中的proxyTable中添加以下内容：

1. "/api": {
2.         target: "http://backend.com/api",
3.         changeOrigin: true,
4.         pathRewrite: {
5.               "^/api": ""
6.         }
7. }

复制代码

保存，重新运行 npm run dev
5.更改url，重新请求

1. axios({
2.       url:"/api/aaa",
3.       method:"POST",
4.       headers:{
5.         Authorization:"Bearer 5llcq3GiwABUg-Fxs...",
6.         Accept:"application/json"
7.       }
8.     }).then(res=>{
9.       console.log(res,"res")
10.     }).catch(res1=>{
11.       console.log(res1,"res1")
12.     })

复制代码

请求结果如下，跨越解决了