yii2 跨域请求配置_伸手党系列四：vuecli3.0以上使用 proxy 进行跨域设置

最新推荐文章于 2024-09-29 10:33:26 发布

weixin_39974958

最新推荐文章于 2024-09-29 10:33:26 发布

阅读量105

点赞数

文章标签： yii2 跨域请求配置

跨域：出于浏览器的同源策略限制，当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

process：process 对象是一个全局变量，它提供有关当前 Node.js 进程的信息并对其进行控制。简单说它就是在nodejs中的一个全局变量。

pathRewrite 是使用proxy进行代理时，对请求路径进行重定向以匹配到正确的请求地址。

vue cli3.0以上和cli2.0变化较大，简化了很多东西，减少了很多配置文件。
在vue cli3.0版本以上进行跨域设置时需要我们自己在项目的根目录中创建一个vue.config.js文件

内部设置如下，我们要进行设置的就是devServer下的 proxy

① api格式不统一时使用如下方法

api如下格式 ↓ ↓ ↓ // bxx/xxx/xxx    api开头不是统一格式 // axx/xxx/xxx    api开头不是统一格式 // cxx/xxx/xxx    api开头不是统一格式 **// 当我们的api不是统一格式的时候使用该方法.**module.exports = {  // 公共路径(必须有的)  publicPath: "./",  // 输出文件目录  outputDir: "dist",  // 静态资源存放的文件夹  assetsDir: "static",  // eslint-loader 是否在保存的时候检查  lintOnSave: false,  runtimeCompiler: false,  productionSourceMap: true, // 不需要生产环境的设置false可以减小dist文件大小，加速构建      devServer: {    hot: true,    open: true,      // 执行项目启动命令后，自动打开项目首页面    host: '0.0.0.0',    // 匹配本机IP地址(默认是0.0.0.0)    port: 8080,     // 开发服务器运行端口号        proxy: {            '/api': {             //将www.qianbuduo.vip印射为/api                target: 'http://www.qianbuduo.vip', // 我们要请求的接口域名                // target: process.env.VUE_APP_URL,                  changeOrigin: true, //是否跨域                ws: true,                                pathRewrite: {                    '^/api': ''  ,                      // ^/api是一个标示，就是用来告诉node这个连接要用代理。                    // '/api': 就是告诉node, 我接口只要是'/api'开头的才用代理.                    // 所以我们的接口要这么写 /api/xxx/xxx. 这样最后代理的路径就是http://www.qianbuduo.vip/api/xx/xx.                    // 但是我们正确的接口路径里面没有/api. 这时候就需要用到 pathRewrite,                    // 用''^/api'':'', 把'/api'去掉, 这样既能有正确标识, 又能在请求接口的时候去掉多余的api.  这样最后代理的路径就是http://www.qianbuduo.vip/xx/xx.                }                             }        },       },}

配置完成后需要重新编译一遍 , 调用接口的时候

let param = {};this.$axios.get( 'api' + 'xxx/xxx/xxx', param)  .then((res) => {                    })  .catch((err) => {      return err;  });

② api格式统一时使用如下方法

( 这样调用接口的时候就不需要再添加api了，直接调用接口就可以例如：this.$axios.get('xxx/xxx/xxx'))

api如下格式 ↓ ↓ ↓ // api/xxx/xxx    api开头是统一格式 // api/xxx/xxx    api开头是统一格式 // api/xxx/xxx    api开头是统一格式**// 当我们的api是统一格式的时候使用如下方法.**module.exports = {  // 公共路径(必须有的)  publicPath: "./",  // 输出文件目录  outputDir: "dist",  // 静态资源存放的文件夹  assetsDir: "static",  // eslint-loader 是否在保存的时候检查  lintOnSave: false,  runtimeCompiler: false,  productionSourceMap: true, // 不需要生产环境的设置false可以减小dist文件大小，加速构建      devServer: {    hot: true,    open: true,      // 执行项目启动命令后，自动打开项目首页面    host: '0.0.0.0',    // 匹配本机IP地址(默认是0.0.0.0)    port: 8080,     // 开发服务器运行端口号        proxy: {            '/api': {             //将www.qianbuduo.vip印射为/api                target: 'http://www.qianbuduo.vip', // 我们要请求的接口域名                // target: process.env.VUE_APP_URL,                  changeOrigin: true, //是否跨域                ws: true,                                                 }                             }        },       },}

这样我们的跨域就设置好了~~~

但是实际开发中需要经常切换地址很麻烦，所以我们可以把 proxy 里的 target 设置为活动的值process.env.VUE_APP_URL；

process在文中开头已经介绍过了，是node的一个全局变量；

它里面的参数设置可以如下方法 ↓ ↓ ↓

首先我们可以在项目根目录创建4个文件 .env文件 .env.development文件 .env.production文件 .env.testing 文件(效果如下图)

.env 全局默认配置文件，不论什么环境都会加载合并

// .env文件VUE_APP_URL = '全局URL'VUE_APP_

.env.development 开发环境下的配置文件

// .env.development 文件VUE_APP_URL= "http://192.168.2.137"  // 开发环境URlVUE_APP_HUANJING= "本地开发环境"NODE_ENV: '"development"',

.env.production 生产环境下的配置文件

// .env.production 文件VUE_APP_URL= "http://www.qianbuduo.vip" // 生产环境URlVUE_APP_HUANJING= "正式生产环境"NODE_ENV: '"production"',

.env.testing测试环境下的配置文件

// .env.testing文件VUE_APP_URL= "http://192.168.xxx.xxx"  // 测试环境URlVUE_APP_HUANJING= "测试环境"VUE_APP_

    .env 是全局默认配置文件任何环境下打印process.env都能打印。

当.env文件内的属性名称和当前环境下配置文件的属性相同时，当前和环境下的属性值会覆盖全局属性值。
例如，当我们在本地开发环境下打印 process.env时，会打印出所有.env的属性，VUE_APP_URL这个属性在全局和本地开发环境都有，所以打印出来的值会是本地开发环境里面设置的VUE_APP_URL。