配置CORS代理请求

参考资料: Vue-CLI 3.x 跨域问题处理

使用代理设置：见官方文档

配置代理

1. 新建配置文件
   
   在 package.json 文件的同级目录下创建 vue.config.js 文件，文件的格式应该为:\

// vue.config.js
module.exports = {
  // 选项...
}

1. 基础配置:

module.exports = {
    outputDir: 'dist',   //build输出目录
    assetsDir: 'assets', //静态资源目录（js, css, img）
    lintOnSave: false, //是否开启eslint
    devServer: {
        open: true, //是否自动弹出浏览器页面
        host: 'localhost',
        port: '8080',
        https: false,   //是否使用https协议
        hotOnly: false, //是否开启热更新
        proxy: null, //这里就是需要配置的代理的地方啊。。。。
    }
}

运行有时候出错，如少写了逗号，修改后要等一会儿才能运行成功，可能是有缓存导致的，具体原因未找到

1. 设置代理 (开发环境下)
   
   我们在前后端分离开发时，不得不面对跨域问题，对于跨域，可以用两种办法进行处理.

安装 nginx，将后端和前端都代理带 nginx 上。

在 vue.config.js 文件中配置 proxy 属性，将 API 请求代理到 API 服务器上，设置 devServer.proxy

填写上面proxy的内容

    proxy: {
        '/': {
            target: 'localhost:5000', //API服务器的地址
            ws: true,  //代理websockets
            changeOrigin: true, // 虚拟的站点需要更管origin
            //pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
            //    '^/api': ''
            //}
        }
    },

在真实请求处直接写baseUrl后面的部分即可。配置完成后要重启服务。

注意：target这里在mac和windows上写法不一样

windows:有的时候要用后面那种，还不明白原因

"target": "localhost:3000" 或 "target": "http://localhost:3000"

mac:

"target": "http://127.0.0.1:3000"

1. 配置favcion图标
   
   查看以下资料：
   
   https://cli.vuejs.org/zh/config/#pwa
   
   https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

vue.config.js

module.exports = {
	outputDir: 'dist', //build输出目录
	assetsDir: 'static', //静态资源目录（js, css, img）
	lintOnSave: false, //是否开启eslint
	pwa: {
	    iconPaths: {
	      favicon32: 'public/favicon.ico',
	      favicon16: 'public/favicon.ico',
	      appleTouchIcon: 'public/favicon.ico',
	      maskIcon: 'public/favicon.ico',
	      msTileImage: 'public/favicon.ico'
	    },
     ......

生产环境 api 请求接口 baseUrl 配置

只需要将 main.js 中 axios 作如下修改：

axios.defaults.timeout = 5001 // 请求超时
axios.defaults.baseURL = 'http://api.someurl.com/'

axios 请求地址的写法不变：

axios.post('/page_element/', {a: 1, b:2}).then((res) => {
  console.log(res.data)
})

实际请求地址为：

http://api.someurl.com/page_element/