每天一点点之vue框架开发 - axios解决跨越问题

 

1.安装

npm install axios

或者 使用 bower:

bower install axios

或者直接使用 cdn:

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

 

2.引入axios

import axios from 'axios'

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

Vue.prototype.axios = axios

通过 this.axios({})来访问

 

3.基本使用

axios({
      url:'http://localhost/api/aaa',
      method:'POST',
      headers:{
        Authorization:'Bearer eyJ0eXAiABUg-Fxs...',
        Accept:'application/json'
      }
    }).then(res=>{
      console.log(res,'res')
    }).catch(res1=>{
      console.log(res1,'res1')
    })

然后报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中添加以下内容：

"/api": {
        target: "http://backend.com/api",
        changeOrigin: true,
        pathRewrite: {
              '^/api': ''
        }
}

保存，重新运行 npm run dev

5.更改url，重新请求

axios({
      url:'/api/aaa',
      method:'POST',
      headers:{
        Authorization:'Bearer 5llcq3GiwABUg-Fxs...',
        Accept:'application/json'
      }
    }).then(res=>{
      console.log(res,'res')
    }).catch(res1=>{
      console.log(res1,'res1')
    })

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