配置CORS代理请求

配置代理

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

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

基础配置:

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, //这里就是需要配置的代理的地方啊。。。。
    }
}

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

安装 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"

配置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/

猜你喜欢