Vue-CLI 3.x 跨域问题处理

一、环境

windows 10
vue-cli 3.11.0

二、创建项目

$ vue create [项目名称]

三、跨域处理

注意:因为vue-cli2.x 与 vue-cli3.x 差别很多,在版本3中精简了很多文件,其中就有vue.config.js文件

1.添加配置文件

在package.json文件的同级目录下创建vue.config.js文件,文件的格式应该为:
// vue.config.js
module.exports = {
  // 选项...
}

2.基础配置:

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,
    }
}
官网给出了丰富而全面的配置,更多配置请参考[官方配置文档](https://cli.vuejs.org/zh/config/)

3.处理跨域(开发环境下)

我们在前后端分离开发时,不得不面对跨域问题,对于跨域,可以用两种办法进行处理.
1.安装nginx,将后端和前端都代理带nginx上。
2.在vue.config.js文件中配置proxy属性,将API请求代理到API服务器上,设置devServer.proxy
    devServer: {
        open: true, //是否自动弹出浏览器页面
        host: "localhost", 
        port: '8080',
        https: false,
        hotOnly: false, 
        proxy: {
            '/api': {
                target: 'http://www.vueadmin.io', //API服务器的地址
                ws: true,  //代理websockets
                changeOrigin: true, // 虚拟的站点需要更管origin
                pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                    '^/api': ''
                }
            }
        },
    }
3.若是原后端API接口地址为 http://www.vueadmin.io/index.php/admin/Index/index,则此时设置API代理后,访问API接口应该写为:/api/index.php/admin/Index/index,只有在添加'/api'后才会被proxy代理到.    

4.处理跨域(部署环境下)

上面的处理跨域方式只限于在本地开发环境下处理跨域问题,若打包部署线上环境需要在服务端处理
服务端:ThinkPHP5
在其入口文件处添加以下内容:

// 准许跨域请求。
header("Access-Control-Allow-Origin: * ");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
/**
 * 浏览器第一次在处理复杂请求的时候会先发起OPTIONS请求。路由在处理请求的时候会导致PUT请求失败。
 * 在检测到option请求的时候就停止继续执行
 */
if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
    exit;
}

原文链接

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!