详解vue-cli本地环境API代理设置和解决跨域

 更新时间:2017年09月05日 09:38:41   作者:Jonz  
这篇文章主要介绍了详解vue-cli本地环境API代理设置和解决跨域,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前言

我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cookie的。

我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置。我们可以直接通过node.js代理服务器来实现跨域请求。

vue proxyTable接口跨域请求调试

在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子:

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {},  
  cssSourceMap: false
 }

服务器提供的接口如果长这样https://www.exaple.com/server_new/login,我们把域名提取出来如https://www.exaple.com;

在config中新建一个文件命名为proxyConfig.js :

module.exports = {
 proxy: {
    '/apis': {  //将www.exaple.com印射为/apis
      target: 'https://www.exaple.com', // 接口域名
      changeOrigin: true, //是否跨域
      pathRewrite: {
        '^/apis': ''  //需要rewrite的,
      }       
    }
 }
}

config文件夹下的index.js引入proxyConfig.js:

var proxyConfig = require('./proxyConfig')

config文件夹下的index.js中的dev改成:

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: proxyConfig.proxy,
  cssSourceMap: false
 }

重启项目npm run dev:

你会发现出现了这个

 

这个时候我们已经设置好了本地API代理了

修改本地hosts文件

文件路径一般是C:\Window\System32\drivers\etc,打开hosts文件,在这一段下面把localhost设置进去

# localhost name resolution is handled within DNS itself.
# 127.0.0.1    localhost
# ::1       localhost
127.0.0.1          activate.adobe.com
127.0.0.1          practivate.adobe.com
127.0.0.1          lmlicenses.wip4.adobe.com
127.0.0.1          lm.licenses.adobe.com
127.0.0.1          na1r.services.adobe.com
127.0.0.1          hlrcv.stage.adobe.com

localhost          www.exaple.com    

搞定

此时我们已经完全解决了跨域问题,以及本地测试后台无法向我们本地环境设置cookie的情况了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue-cli3 从搭建到优化的详细步骤

    vue-cli3 从搭建到优化的详细步骤

    这篇文章主要介绍了vue-cli3 从搭建到优化的详细步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue2+JS实现扫雷小游戏

    Vue2+JS实现扫雷小游戏

    实现小游戏可以锻炼自己的逻辑思维能力,也不会很枯燥,完成时会给自己带来一种满足感。本文就将利用Vue和JS实现简单的扫雷小游戏,需要的可以参考一下
    2022-06-06
  • vue3.0中使用websocket,封装到公共方法的实现

    vue3.0中使用websocket,封装到公共方法的实现

    这篇文章主要介绍了vue3.0中使用websocket,封装到公共方法的实现,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue实现图片与文字混输效果

    Vue实现图片与文字混输效果

    用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘记了原生JS对DOM操作,今天在项目中遇到了文字和图片混输的情况,小编给大家分享Vue实现图片与文字混输效果,感兴趣的朋友一起看看吧
    2019-12-12
  • 讨论vue中混入mixin的应用

    讨论vue中混入mixin的应用

    这篇文章主要介绍了vue中混入mixin的理解和应用,对vue感兴趣的同学,可以参考下
    2021-05-05
  • Vue用mixin合并重复代码的实现

    Vue用mixin合并重复代码的实现

    这篇文章主要介绍了Vue用mixin合并重复代码的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue3 与 vue2 优点对比汇总

    vue3 与 vue2 优点对比汇总

    随着用vue3 的开发者越来越多,其必定是又她一定的有带你,接下来这篇文章小编就为大家介绍vue3 对比 vue2 有什么优点?感兴趣的小伙伴请跟小编一起阅读下文吧
    2021-09-09
  • vue中el-checkbox、el-switch绑定值问题详解

    vue中el-checkbox、el-switch绑定值问题详解

    这篇文章主要给大家介绍了关于vue中el-checkbox、el-switch绑定值问题的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • vue中用js如何实现循环可编辑表格

    vue中用js如何实现循环可编辑表格

    这篇文章主要介绍了vue中用js如何实现循环可编辑表格,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 手写vite插件教程示例

    手写vite插件教程示例

    这篇文章主要为大家介绍了手写一个vite插件教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06

最新评论