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

一、环境

windows 10
vue-cli 3.11.0

二、创建项目

$ vue create [项目名称]

三、设置代理方式处理跨域

注意:因为vue-cli2.xvue-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,
    }
}

官网给出了丰富而全面的配置,更多配置请参考官方配置文档

3.设置代理(开发环境下)

我们在前后端分离开发时,不得不面对跨域问题,对于跨域,可以用两种办法进行处理.

  • 安装nginx,将后端和前端都代理带nginx上。
  • 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': ''
                }
            }
        },
    }
    //若是原后端API接口地址为 http://www.vueadmin.io/index.php/admin/Index/index,则此时设置API代理后,访问API接口应该写为:/api/index.php/admin/Index/index,只有在添加'/api'后才会被proxy代理到.  

四、服务端设置响应头处理跨域(部署环境下)

设置代理的处理跨域方式只限于在本地开发环境下处理跨域问题,若打包部署线上环境需要在服务端处理

  • 服务端: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;
    }

    原文链接

五、vue-resource发送跨域请求

我们习惯在jQuery 中使用AjaxJsonp发送跨域请求,但是vue本身不支持发送Ajax请求,需要使用vue-resourceaxios等插件实现。axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护,但是axios本身并不支持发送跨域的请求,没有提供相应的API,作者也暂没计划在axios添加支持发送跨域请求,所以我们只能选择使用vue-resource发送跨域请求。

  • 安装vue-resource:npm install vue-resource --save
  • 基本用法:
    //在main.js中引入 "vue-resource"
    import VueHttp from "vue-resource";
    //注册,以便在全局使用
    Vue.use(VueHttp);
    //在组件中使用
    this.$http.jsonp(url,[ops]).then((response)=>{
    //请求成功处理业务逻辑
    })
    //注意:jsonp跨域请求只能使用GET方式
  • 基本例子演示:
    // 客户端
    <script>
    var vm = new Vue({
        el:"#app",
        methods:{
            sendJsonp:function(){
                this.$http.jsonp('https://xxxxxxxxxx',
                {
                    params:{
                        id:"123456",
                        t:1,
                    },
                    jsonp:'callback' //设置jsonp回调的函数名
                }).then(function(res){
                        console.log(res.data);
                });
            }
        }
    });
    </script>
    //服务端(PHP)
    <?php
    $id = $_GET['id'];
    $t = $_GET['t'];
    $jsonp = $_GET['callback'];//get接收jsonp自动生成的函数名
    $id = $id+1000;
    $t = $t +3;
    $arr = array(
    'id' => $id,
    't' => $t
    );
    echo $jsonp.'('. json_encode($arr). ')'; //jsonp函数名包裹json数据

    学习原文① | 学习原文②

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 2

Mark一波,学习到了!

4年前 评论
自由与温暖是遥不可及的梦想

php laravel 不需要设置

4年前 评论
wsAdmin (楼主) 4年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!