使用Vue解决跨域问题

如果你是一个Web前端工程师，那么跨域这个问题肯定是绕不开的！

1. 创建 vue.config.js

设置 devServer 属性

module.exports = {      
  devServer: {                //webpack-dev-server配置
      host : 'localhost',       
      port : 8080,            //配置本项目运行端口
      proxy: {                //配置代理服务器来解决跨域问题
          '/api': {
              target: 'http://localhost:3000',      //配置要替换的后台接口地址
              changOrigin: true,                      //配置允许改变Origin
              pathRewrite: {
                  '^/api': ''
              }
          },
      }
  },
}

2. axios 设置

import axios from 'axios'

export default function ({data}) {
  const baseUrl = '/api'
  const server = axios.create({
    baseURL: baseUrl,
    timeout: 5000
  })

  return server(data)
}

3. 封装请求api

import request from '@/utils/http/request.js'
export function userListApi () {
  return request ({
    data: {
      url: '/userList',
      method: 'GET'
    }
  })
}

4. 发送请求

<script>
import { userListApi } from '@/api/user'
export default {
  name: 'Index',
  mounted () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      let result = await userListApi()
      console.log(result.data)
    }
  }
}
script>

总结

解决跨域的办法其实还有很多，像 jsonp、cors、nginx 等…

其实在开发中一般情况下是后台来解决跨域的（我个人想法，不代表所有），但是如果非要前端来解决我们也有办法。记得刚开始接触跨域这个问题的时候，百思不得姐。最終還是有點理解了，最近在學習Vue再次碰到跨域的問題，就拿Vue再來解決一下跨域問題，記錄留念。