vue项目部署在宝塔面板上的跨域请求问题

一、开发环境的跨域问题

如果只是在本地环境进行vue项目测试，当vue使用axios请求后端接口时，跨域配置如下：
在config文件夹里面的index.js里面添加：

代码：

	proxyTable: { // axios跨域处理
      '/api': { // 此处并非和url一致
        target:'http://xxx.xx.xxx.xxx:8080',
        changeOrigin:true, //允许跨域
        pathRewrite:{
          '^/api': ''
        }
      }
    }

我的axios在main.js中的配置：

import axios from 'axios'
// 这个headers是因为后端接口接收post请求的头部要求是form-data格式的，所以我才要这样设置
axios.defaults.headers = {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
Vue.prototype.$axios = axios
Vue.prototype.HOME = '/api'

调用示例：

            this.$axios.post('/api/login',
              qs.stringify({
                phone: phone,
                psw: md5(psw)}))
              .then(response => {
                var res = response.data
                console.log(res)
              }).catch(() => {
                console.log('请求失败')
              })

注意调用的接口一定要加/api。
qs.stringify和刚刚的axios.defaults.headers一样，都是为了符合后端接口post请求的格式。

二、在宝塔面板上生产环境的跨域问题

1. vue项目运行npm run build命令，生成dist文件夹，里面有index.html和static文件夹。
2. 宝塔面板新建一个网站（网上教程很多），把index.html和static文件夹放进网站的根目录。
3. 在网站的配置文件里面添加如下代码：
   
   代码如下：

location /api {
  add_header 'Access-Control-Allow-Origin' '*';
  proxy_pass http://xxx.xx.xxx.xxx:8080;
}

保存配置文件后就好啦！

最后，感谢以下大佬博客提供参考：
vue-cli项目开发/生产环境代理实现跨域请求【结合nginx服务器来实现—最简单的方式】【有坑】（这个大佬说pathRewrite配置时要多加个api，但我没有加也是可以的）
axios处理跨域问题
解决vue-cli项目开发中跨域问题