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. BZOJ3732 (Kruskal重构树)

    Kruskal重构树上\(x\)和\(v\)的\(lca\)的权值即为它们最长路最小值 #include <cstdio> #include <iostream> #inclu ...

  2. Affinity broken due to vector space exhaustion 问题

    dmesg 中异常打印: kernel: irq 632: Affinity broken due to vector space exhaustion. kernel: irq 633: Affin ...

  3. kubernetes之镜像拉取策略ImagePullSecrets;

    1.容器镜像是什么? 1.容器镜像(Container Image)是最终运行的软件: 2.容器镜像(最初为Docker镜像,现在叫OCI镜像更合适)是将软件打包的形式.但是容器镜像还可以携带额外的设 ...

  4. 微软Azure配置中心 App Configuration (三):配置的动态更新

    写在前面 我在前文: <微软Azure配置中心 App Configuration (一):轻松集成到Asp.Net Core>已经介绍了Asp.net Core怎么轻易的接入azure ...

  5. 【java】学习路线14-抽象类、多态

    /*抽象类 abstractabstract class A{    }注意abstract类中不一定需要有abstract方法但是有abstract方法的类中,该类一定是abstract方法抽象类不 ...

  6. 03_Linux基础-文件类型-主辅提示符-第1提示符-Linux命令-内外部命令-快捷键-改为英文编码-3个时间-stat-其他基础命令

    03_Linux基础-文件类型-主辅提示符-第1提示符-Linux命令-内外部命令-快捷键-改为英文编码-3个时间-stat-{1..100}-du-cd-cp-file-mv-echo-id-she ...

  7. PTA C语言作业

    6-1 使用函数输出一个整数的逆序数 (20 分) 本题要求实现一个求整数的逆序数的简单函数. 函数接口定义: int reverse( int number );  其中函数reverse须返回用户 ...

  8. KingbaseES R6 集群物理copy方式手工添加新备库节点

    案例说明: 对于主库数据量比较大的环境,在添加新节点是可以采用在线clone方式创建新的备库节点,也可以在离线的状态下,直接拷贝其中一个备库的所有集群相关目录来创建新的备库节点.本案例介绍了通过离线物 ...

  9. Exchange 2019数据库切换

    最近在测试Exchange 2019的一些安装步骤.在测试到DAG的数据库切换的时候遇到了一些问题.An Active Manager operation failed. Error: The dat ...

  10. Openstack Neutron : 安全

    目录 - iptable:起源 - tables - chains - rules - 方向 - Security group 安全组: - Firewall 防火墙: - 更高的安全 - 无处安放的 ...