vue2.x 解决跨域

通过devServer将接口代理到本地
在开发的时候,需要请求同局域网内的接口,发现直接使用http://对方的ip地址/接口路径,会出现类似下图的跨域报错

找到并打开vue.config.js文件,添加devServer 如下

 devServer:{
   // 下面是接口的路径,我的接口 地址是http://ad.why.com/login
   proxy:{
    '/api': {
      // 需要转发代理的域名
      target: 'http://ad.why.com',
      // 如果是https接口,需要配置这个参数
      secure: false,
      // 如果接口跨域,需要进行这个参数配置
      changeOrigin: true,
      // 这是一个通配符,设置完了之后每个接口都要在前面加上/api(特别注意这一点)
      athRewrite: {
        '^/api': '/api'
      }
    }  
  }
}

vue2 解决跨域的更多相关文章

  1. axios解决跨域问题

    最近把我自己的网站升级生成前后端分离的项目(vue+springBoot),不可避免的就遇到了跨域问题.从中学到了许多知识,随便分享出来,也巩固下所学. 谈到跨域,首先得了解CORS(Cross or ...

  2. Axiso解决跨域访问

    问题: 在项目中需要需要讲本地项目去请求一个URL接口获取数据 例如: 本地请求地址:http://127.0.0.1:19323/site/info.json 请求Url地址:http://www. ...

  3. AngularJs最简单解决跨域问题案例

    AngularJs最简单解决跨域问题案例 2016-05-20 09:18 82人阅读 评论(0) 收藏 举报  分类: javascript(1)  作者:白狼 出处:http://www.mank ...

  4. 后台访问 JS解决跨域问题

    今天看了看以前做的一个小项目(其实就是一个页面),分享一下当时解决跨域问题的: 背景:公司把项目部署在多台服务器上,防止一台服务器崩溃后,其他的可以继续访问,对应本公司来说,某台服务器出问题后,技术人 ...

  5. PhoneGap开发跨平台移动APP - 解决跨域资源共享

    解决跨域资源共享 一.WebApi解决跨域资源共享. 开发中选择WebApi来作为服务端的数据接口,由于使用PhoneGap,就需要通过js来获取远程远程数据服务器的数据,由于同源策略的限制,这就涉及 ...

  6. 使用nginx解决跨域问题(flask为例)

    背景 我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能.但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax ...

  7. 使用Access-Control-Allow-Origin解决跨域

    什么是跨域 当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.google.com),那么我们就可以认为它们是相同的域(协议,域名,端口都必须相同). 跨域就指着 ...

  8. Ajax 是什么?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题?以及 HTTP状态码

    一.Ajax 是什么: 1. 通过异步模式,提升了用户体验 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3. Ajax 在客户端运行,承担了一部分本来由服务器承担的工作 ...

  9. web api 解决跨域的问题

    web api 总是会遇到跨域的问题,今天我找到了如下方法解决跨域: 1: a:在配置文件中的 加上如下代码 <system.webServer> <httpProtocol> ...

随机推荐

  1. Luogu1993 小K的农场 (差分约束)

    \(if \ a - b <= c, AddEdge(b, a, c)\) Be careful, MLE is not good. #include <cstdio> #inclu ...

  2. Taurus.MVC 微服务框架 入门开发教程:项目部署:2、让Kestrel支持绑定多个域名转发,替代Ngnix使用。

    系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...

  3. ceph 009 管理定义crushmap 故障域

    管理和自定义crushmap 定义pg到osd的映射关系 通过crush算法使三副本映射到理想的主机或者机架 更改故障域提高可靠性 pg到osd映射由crush实现 下载时需要将对象从osd搜索到,组 ...

  4. Mybatis-Plus使用@TableField实现自动填充日期

    一.前言 我们在日常开发中经常使用ORM框架,比如Mybatis.tk.Mybatis.Mybatis-Plus.不过最广泛的还是Mybatis-Plus,我们的一些表,都会有创建时间.更新时间.创建 ...

  5. 如何使用CSS伪类选择器

    总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...

  6. CF-1684C - Column Swapping

    Problem - 1684C - Codeforces 题意: 现在有一个n*m的棋盘,每个棋子有一个值,你可以交换两列棋盘的棋子位置,使得每一行的棋子从左到右为非递减. 题解: 只需要判断一行不满 ...

  7. 报错:①Tog goal specified requires a project to execute but there is no POM in this directory......②说类HelloWorld是公共的, 应在名为 HelloWorld.java 的文件中声明 public class HelloWorld......

    在运行Maven的命令时,在DOS窗口里面必须把目录切换到项目的根部,要不然命令是找不到目的地. 下图是错误示范,项目在Demo02这个目录里,就必须将目录切换到Demo02下,否则DOS窗口只有飘红 ...

  8. docker注册中心相关操作

    相关命令详解 (1)push推送 将镜像推送到由其名称或标签指定的仓库中.与pull命令相对. [root@docker ~]# docker push --help Usage: docker pu ...

  9. vue简单的请求api并渲染到表格

    环境 vue3.11 组件库 https://element-plus.gitee.io/#/zh-CN 开始 初始化一个项目 App.vue <template> <div> ...

  10. 让Python更优雅更易读(第二集)

    友情链接 让Python更优雅更易读(第一集) 1.装饰器 1.1装饰器特别适合用来实现以下功能 运行时校验:在执行阶段进行特定校验,当校验通不过时终止执行. 适合原因:装饰器可以方便地在函数执行前介 ...