由于Vue-cli服务器是跑在node环境下的8080端口,我们的php代码可能在Apache环境下的7070端口,这个时候就会出现跨域

此刻这段php代码在7070端口上

如果直接去访问

页面报错

此刻我们可以不用去后台配置,直接打开vue-cli目录下的config/index.js配置

 proxyTable: {
'/api': {
target: 'http://127.0.0.1:7070/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}

如果用axios进行请求,为了不用再每次请求前缀都加api可以在全局main.js文件中配置axios

然后在请求

 

 数据获取成功

关于Vue-cli的跨域解决的更多相关文章

  1. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  2. [转]vue跨域解决方法

      vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...

  3. JavaScript跨域解决办法

    在找到跨域解决办法之前,我们要先弄清楚一些基本概念 什么是跨域? 什么是“同源策略”? 跨文档消息通信 & 跨域请求数据 主域相同而子域不同 不同域名的跨域访问 什么是跨域? 简单地理解就是因 ...

  4. JAVA联调接口跨域解决办法

    JAVA联调接口跨域解决办法 第一种代码: HttpResponse response = new BasicHttpResponse(HttpVersion.HTTP_1_1,HttpStatus. ...

  5. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  6. spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除,限制为图片代码等相关配置

    spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ ...

  7. JavaScript跨域解决方法大全

    跨域的定义:JavaScript出于安全性考虑,同源策略机制对跨域访问做了限制.域仅仅是通过“URL的首部”字符串进行识别,“URL的首部”指window.location.protocol +win ...

  8. Vue开发环境跨域访问

    Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下 module.exports = { dev: { // Paths assetsSubD ...

  9. ssm跨域解决

    最近挑战杯项目要交了,最后一个开发的项目,还是得好好对待,不知道会不会真香,昨天还是遇到了一些问题,尤其是对接的时候,用postman对接的时候,没有啥问题,结果前端上线对接时,发现ajax无法请求到 ...

  10. vue跨域解决方法 及设置api路径方法

    vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is prese ...

随机推荐

  1. [rsync]rsync设定及错误处理

    server端设置      修改/etc/default/rsync RSYNC_ENABLE=true RSYNC_OPTS='--address=10.192.0.5' RSYNC_NICE=' ...

  2. 【题解】Crash的数字表格 BZOJ 2154 莫比乌斯反演

    题目传送门 http://www.lydsy.com/JudgeOnline/problem.php?id=2154 人生中第一道自己做出来的莫比乌斯反演 人生中第一篇用LaTeX写数学公式的博客 大 ...

  3. HDU1815 2-sat+二分

    Building roads Time Limit: 10000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...

  4. Type.IsAssignableFrom 方法

    方法: public virtual bool IsAssignableFrom ( Type c ) 1.如果 c 和当前 Type 表示同一类型2.当前 Type 在 c 的继承层次结构中3.当前 ...

  5. 在此位置打开CMD

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\folder\shell\cmd]@="在此位置打开CMD"[HKE ...

  6. Chinese Rings (九连环+矩阵快速幂)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2842 题目: Problem Description Dumbear likes to play th ...

  7. Git 常用命令(二)

    用 git init 在目录中创建新的 Git 仓库.  $ mkdir test $ cd test/ $ git init Initialized empty Git repository in ...

  8. perl模拟登录(1)

    use WWW::Mechanize; my $ua = WWW::Mechanize->new(); $ua->post('http://localhost/dvwa/DVWA-mast ...

  9. KVM虚拟机建立快照

    部分转载: http://blog.csdn.net/gg296231363/article/details/6899533 windows虚拟机默认镜像格式为raw,快照默认格式为qcow2.win ...

  10. 安全测试===burpsuit指南

    网址: https://www.gitbook.com/book/t0data/burpsuite/details 引子 刚接触web安全的时候,非常想找到一款集成型的渗透测试工具,找来找去,最终选择 ...