当你启动一个vue项目时,项目会运行在一个webpack的服务上,所以此时去访问其他端口或者是其他地址时,属于跨域请求,故会报异常。

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当出现此异常时,不要慌,解决方法很简单。

首先,打开项目的webpack.config.js文件

在当前页面搜索

devServer:

然后在此节点下添加以下这个对象:

name可以随意命名,不过最好按一定的格式命名,待会儿后面会用到。以下是此对象的代码

proxy: {
'/api': {
target: 'http://localhost:64938/',
changeOrigin: true,
pathRewrite:{
"/api":""
}
  }
}

添加对象后,回到我们调用请求的页面,修改对应报错的请求url,把原本的url的请求跟地址 也就是 如:http://localhost:64938/ 替换为 /api  ,然后重启项目!重启项目!重启项目!

重启项目,即可访问!

关于vue-resource 跨域请求的异常处理方法的更多相关文章

  1. vue实现跨域请求的设置

    vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...

  2. Vue ajax跨域请求

    Vue webpack-dev-server实现跨域请求 思路 配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写 Vue里定义一个全部变量:site Vue.pro ...

  3. 本地Vue项目跨域请求本地Node.js服务器的配置方法

    前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...

  4. Thinkphp5.1允许uni-app的H5跨域请求接口解决方法

    情景: uni-app使用vue框架开发混合APP,虽然APP或者小程序没有跨域,但希望就是写完这个既有H5,又有APP,小程序等,所以能通过后端解决跨域最好.但是不知道是vue的原因还是什么,在PH ...

  5. ajax本地跨域请求以及解决方法

    什么是跨域?   我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源,只要没 ...

  6. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  7. Jquery DataTable AJAX跨域请求的解决方法及SSM框架下服务器端返回JSON格式数据的解决方法

    如题,用HBuilder开发APP,涉及到用AJAX跨域请求后台数据,刚接触,费了不少时间.幸得高手指点,得以解决. APP需要用TABLE来显示数据,因此采用了JQ 的DataTable.  在实现 ...

  8. ThinkPHP 5 中AJAX跨域请求头设置方法

    最近用thinkphp做项目,在测试环境时,存在接口的测试问题.在tp官网也没能找到相关的解决方法.自已看了一下源码,有如下的解决方案. 在项目目录下面,创建common/behavior/CronR ...

  9. IE9 下面, XMLHttpRequest 是不支持跨域请求的解决方法

    在 IE9 下面, XMLHttpRequest 是不支持跨域请求的. IE10 的 XMLHttpRequest 支持跨域, 而 IE8, IE9 需要使用 XDomainRequest 来实现跨域 ...

随机推荐

  1. 命名规范 camel case, pascal case, hyphen

    2019-11-08  refer : https://ux.stackexchange.com/questions/43174/update-vs-modify-vs-change-create-v ...

  2. lsof---列出当前系统打开的文件信息

    lsof---list open file,一个列出当前系统打开文件的工具 1.lsof查找原理 在Linux系统中,系统为了方便管理进程,会在/proc下为每一个运行中的进程创建一个目录,目录名就是 ...

  3. Sharepoint 开启App 配置App

    如果没有Enable app,打开app store的时候出出现错误: Sorry, apps are turned off. If you know who runs the server, tel ...

  4. 【原创】大数据基础之Chronos

    官方:https://mesos.github.io/chronos/ mesos集群中替换crontab Chronos A fault tolerant job scheduler for Mes ...

  5. 【题解】JSOI2008 最大数

    题目描述 现在请求你维护一个数列,要求提供以下两种操作: 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制:L不超过当前数列的长度.(L>=0) 插 ...

  6. [leetcode] 题解记录 1-10

    博客园markdown太烂, 题解详见https://github.com/TangliziGit/leetcode/blob/master/solution/1-10.md Leetcode Sol ...

  7. 解决 Ubuntu 19 安装openjdk 8后与openjfx不兼容

    小淘气放假了,孩子在上幼儿园的小朋友,报班也不能太变态嘛, 还是让他自己娱乐的时间多一点,但是现在在家的娱乐就是看电视,听说电视看多了越看越傻,就想方设法的给他找一点娱乐活动,把我闲置的树莓派给他装了 ...

  8. 使用PyQt5自制文件查找工具,并生成EXE文件

    一.工作中,有一个关键词查找工作,查找开发版本中使用的文本,有哪些词语是非法的,一个一个去查太累了,所以想到了用代码来实现.可后来想想,能否做成简单的小工具,大家都可以使用. 于是就着手编写工具.原来 ...

  9. python之时间日期calendar

    calendar是与日历相关的模块,calendar模块文件里定义了很多类型,主要有Calendar,TextCalendar以及HTMLCalendar类型.其中,Calendar是TextCale ...

  10. Oracle【多表查询操作(SQL92&SQL99)】

    多表联合查询:需要获取的数据分布在多张表中 SQL92: --笛卡尔积:将多个表的数据进行一一对应,所得的结果为多表的笛卡尔积 select * from emp; select * from dep ...