美文网首页Vue
Vue-cli中本地跨域请求后端接口详细配置

Vue-cli中本地跨域请求后端接口详细配置

作者: _执着执着再执着 | 来源:发表于2018-02-01 15:59 被阅读0次

RT

打开你的vue项目工程目录,如下:

项目目录

选择config下的index.js文件,在proxyTable中添加如下配置:

添加的配置

找到dev下的proxyTable配置,这里详细解释下 proxyTable中的配置.

图中的'/admin'意思是你配置的接口名称,比如请求login/login接口,,则请求的url为'/admin/login/login'如图

接口中的url地址

其中changeOrigin: true // 这个设置就是设置跨域,一定要加.

pathRewrite里是路径重写的意思,如果设置'^/admin':' ',设置为空值时,请求'/admin/login/login/地址时会请求

'你家后端的IP地址/login/login',注意,这时你家后端的ip地址后面没有跟着admin参数,而是直接跟着/login/login/.

如果设置'^/admin':'/admin ',设置为admin时,请求'/admin/login/login/地址时会请求

'你家后端的IP地址//admin/login/login',注意,这时你家后端的ip地址后面会跟着admin参数,

很多人报错,大多都错在这里,要根据自家后端接口进行配置,比如要请求'http://xx.xxx.xx.xx/Tong/index.php/admin/login/login'接口时,当你需要这个admin时

pathRewrite需要配置为:'^/admin': '/admin',

比如要请求'http://xx.xxx.xx.xx/Tong/index.php/login/login'接口时,当你不需要这个admin时,

pathRewrite需要配置为:'^/admin': ' ',设置为空

参考 官方文档地址: http://suo.im/2e2eW1

这个配置走了许多坑,记录共勉

如有错误,欢迎指正

相关文章

  • Vue-cli中本地跨域请求后端接口详细配置

    RT 打开你的vue项目工程目录,如下: 选择config下的index.js文件,在proxyTable中添加如...

  • nodejs中间层/后端代理解决跨域

    一、请求时跨域,无法请求 在无论axios还是ajax请求时,若不是自己后端给写好的后端接口地址,其他接口地址若无...

  • vue-cli本地跨域配置

    开发中调试接口会遇到跨域问题,可以修改根目录下config/index.js文件。 参考 vuejs-templates

  • [vue-cli]axios跨域问题

    前后端分离,请求跨域问题。1、已经在后端进行了跨域配置: 但是在前端请求时还是有问题: 解决(= =):这段代码需...

  • vue 跨域

    前后端分离之后,常出来的问题就是访问接口是出现跨域的问题,我们可以在配置文件中配置proxyTable来解决跨域问...

  • Vue学习笔记(一)

    跨域问题 vue前端跨域问题 1. 利用vue-cli框架与axios结合,访问服务器后端接口,axios不需要太...

  • 【vue】如何引用外部cdn资源

    在开发阶段,前端调用后端接口可能会出现跨域问题,在vue-cli中已经为我们集成了http-proxy-> mi...

  • 请求接口时跨域问题,前端解决方法

    在前后端接口请求中,由于浏览器的限制,会出现跨域的情况。常用的跨域方案有: 1、JSONP跨域2、Nginx反向代...

  • WebApi跨域

    在接口调用的时候,需要考虑到接口的跨域请求。 在web.config配置中添加几条配置即可 在部署到IIS上时,可...

  • 在IE9调用下调用接口返回415(已解决)

    1.在IE9下调用接口时候返回415报错,在其他的浏览器下都可以正常的访问。后端也已经配置了跨域的请求。看请求的正...

网友评论

    本文标题:Vue-cli中本地跨域请求后端接口详细配置

    本文链接:https://www.haomeiwen.com/subject/oumdzxtx.html