通过这种方法也可以解决跨域的问题。

使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)

例如请求的url:“http://f.apiplus.cn/bj11x5.json

1、打开config/index.js,在proxyTable中添写如下代码:

1
2
3
4
5
6
7
8
9
proxyTable: { 
  '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
    target: 'http://f.apiplus.cn', //源地址 
    changeOrigin: true, //改变源 
    pathRewrite: { 
      '^/api': 'http://f.apiplus.cn' //路径重写 
      
  
}

2、使用axios请求数据时直接使用“/api”:

通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下:

vue+axios跨域解决方法的更多相关文章

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

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

  2. JavaScript跨域解决方法大全

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

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

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

  4. vue跨域解决方法

    针对不在同一服务器,很可能出现跨域问题,解决方法 注意:修改了配置文件,需要重启才能生效

  5. vue axios跨域

    现在应用都是前后端分离,这也造成前端在调用接口时出现跨域问题,在控制台会这样提示 ,如果有类似于此图的提示,就已经表明你的接口调用出现了跨域问题,此文章是我对于vue跨域其中一种方式的一些经验,如果错 ...

  6. VUE AXIOS 跨域问题

    背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...

  7. Nuxt使用axios跨域问题解决方法

    Nuxt 是 Vue 项目服务器端渲染(SSR)解决方案.而在使用时,就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题.本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题 ...

  8. ajax原理和跨域解决方法

    ajax是异步的 JavaScript 和 XML.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 1--启动 ...

  9. WCF跨域解决方法及一些零碎的东西。

    之前发过一篇随笔,说的WCF配置文件配置问题.里面也配了跨域支持,但是jsoncollback只支持Get请求,Post请求是解决不了,所以这里把真正的WCF跨域问题贴出来. 话不多说,直接帖配置文件 ...

随机推荐

  1. onceAgain, 这是一个py群的群公告说明

    群规: 1. 不骚扰人 2. 不涉及娱乐政治 3. 主要就这两条 入门参考:https://book.douban.com/review/9547077/ qq群/网盘:523445644  # 加群 ...

  2. js 数据处理

    开发过程中经常遇到 1. json数据结构(对象和数组) json对象:var obj = {"name":"xiao","age":12} ...

  3. Road of computer tec 01

    回顾自己过去将近3年的学习经历 当初报考的时候,自己是真正喜欢这个专业的么? 当初报这个专业的时候,对计算机还没有什么很明显的概念,只知道这个专业以后是要每天面对电脑的,喜欢不喜欢谈不上吧,但是还蛮感 ...

  4. elment重置表格行高,hover效果

    来源网络,做个笔记.表头行高.el-table__header tr, .el-table__header th { padding: 0; height: 50px; }表体行高 .el-table ...

  5. 如何理解JavaScript中的原型和原型链

    首先是一张关系图,避免抽象化理解时产生的困难 Function对象 函数对象是JavaScript学习中不可避免的一部分,而且这一部分相对重要且抽象 函数的创建方式有2种: 字面量创建 var foo ...

  6. BluePrism初尝2

    在接近三周的自学中,初步体验到了RPA的甜头. 在对BP这个工具慢慢的深入接触中,从0 到1的探索式学习,从最开始的一个个的小功能模块的用途,每一个的属性的功能,到现在自己能初步尝试组织一些简单的流程 ...

  7. Problem A: STL——灵活的线性表

    Description 数组和链表是我们熟知的两种线性结构,但是它们不够灵活(不能同时实现直接插入.删除和访问操作),给你若干种操作,你能通过一种灵活的容器,实现它们的功能吗? 操作1:Build a ...

  8. jquery slideDown 控制div出现的方向

    .custom-popup { position: absolute; /*top: 0;*/ 上向下 ; 下向上 ; ; display: none; width: 100%; height: 10 ...

  9. clickhouse在Linux上的安装部署

    $ sudo apt-get install clustershell #输入你的管理员密码 $ cd /etc/clustershell $ sudo gedit groups #在文件中添加如下内 ...

  10. python中的lambda表达式

    lambda是python中匿名函数的写法  我们可以在不定义函数名的情况下一边定义并调用这个函数 例子: 普通方法定义函数:def  plus(a,b): return a+b lambda方法  ...