Vue： 初学者常遇到的 ajax 跨域问题 代理 配置

Vue axios ajax 跨域问题 代理

最近在写项目时终于遇到了ajax 跨域问题，在网上查了许多资料，最终解决问题

原理：前后端分离的开发中，由于分开开发，前端在使用ajax时一定会遇到 ajax 跨域问题。vue-cli为了保证开发时的效率，可以使用代理的方式解决问题，但是在实际上线中如果需要跨域，还需要配置别的东西…

Axios的基本配置

首先下载安装 axios npm install axios

在main文件里引用，并且加到Vue 的原型上
import axios from 'axios'
Vue.prototype.$axios = axios
这样在组件中就可以使用axios 了

vue 跨域问题

正常情况下不跨域是这样的

this.$axios.get('/api/v1/login').then(res => {
      console.log(res)
      console.log(res.data.message)
    }).catch(err => {
      console.log(err)
    })

会返回

{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}

这是成功的。

而在跨域问题出现后，是这样的
No 'Access-Control-Allow-Origin' header is present on the requested resource

这是由于浏览器的同源政策导致的， 对 协议、域名、端口 不同的网页无法相互访问。

CORS

为了解决ajax 的跨域问题，就要用到 CORS 。
Cross-Origin Resource Sharing ， 简称 CORS

CORS是W3c工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否

简单说， CORS 可以避开浏览器的同源政策，是官方推荐的跨域解决方案

Vue 在开发时的跨域

在前后端分离的开发模式中，前端开发的环境和后端不同，很可能出现跨域问题，而跨域问题需要前端和后端方面共同解决。

这里给出vue 的跨域解决方案。
vue在开发时，会有跨域问题，一般的解决方案就是 代理 。

这里开发用到的是 vue-cli,
首先在项目中找到config 文件夹

在config 文件夹中找到 index.js 文件

在其中找到

   proxyTable: {}

这一项，向其中加入

    proxyTable: {
      '/api': {
        target: 'http://nopaper.cn:8080/',  // 需要代理的域名
        changeOrigin: true, // 代理
        pathRewrite: { 
          '^/api': ''  // 用 /api 代替 target 的路径
        }
      }
    }

尝试一下
在组件中使用，这里以登陆为例：

    login () {
      this.$axios({
        method: 'post',
        url: '/api/v1/teacher/login',
        params: {
          't_num': this.t_num,
          't_pwd': this.t_pwd
        }
      }).then(res => {
        console.log(res)
        let data = 'brear ' + res.data.access_token
        this.$store.commit('set_token', data)
        if (store.state.token) {
          this.$router.push('/home')
          console.log(store.state.token)
        } else {
          this.$router.replace('/login')
        }
      }).catch(err => {
        console.log(err)
      })
    }

尝试一下：

请求成功 ！