当你启动一个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. 数值优化(Numerical Optimization)学习系列-无梯度优化(Derivative-Free Optimization)

    数值优化(Numerical Optimization)学习系列-无梯度优化(Derivative-Free Optimization) 2015年12月27日 18:51:19 下一步 阅读数 43 ...

  2. Java New IO

    1.NIO介绍 应用程序中,通常会涉及两种类型的计算:计算密集型和I/O密集型.对多数应用来说,花费在等待IO上的时间是比较大的.因此提高IO操作效率对应用的性能至关重要. 面向流的IO系统一次处理一 ...

  3. Java反射的理解(六)-- 通过反射了解集合泛型的本质

    Java反射的理解(六)-- 通过反射了解集合泛型的本质 上述写了那么多,我们可能会有个疑问,为什么要用反射,步骤比我们常规的加载类操作复杂多了,别急,这个问题我最后才解答,我们先来了解集合泛型的本质 ...

  4. C Looooops

    看了半天的同余 扩展欧几里得 练练手 C Looooops Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 27079   A ...

  5. 进阶Java编程(1)多线程编程

    Java多线程编程 1,进程与线程 在Java语言里面最大的特点是支持多线程的开发(也是为数不多支持多线程的编程语言Golang.Clojure方言.Elixir),所以在整个的Java技术学习里面, ...

  6. [转载]Yacc基础

    原文:https://www.ibm.com/developerworks/cn/linux/sdk/lex/index.html,摘录部分内容. Yacc的定义 Yacc 代表 Yet Anothe ...

  7. java代码实现图片内容转文字

    前言 现在的手机已经可以实现拍照转文字了.作为一名程序员,得使用java代码实现这一功能,虽然可能没啥用!!! pom.xml 添加依赖 <dependency> <groupId& ...

  8. C# 移除数组中重复项

    方法一: static void Main(string[] args) { //看到数组的第一反应应该是排序 ,,,,,,,}; //去掉数组中重复的项 //先排序 arrayAsc(array); ...

  9. flutter: Another exception was thrown: Navigator operation requested with a context that does not include a Navigator.

    import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends State ...

  10. 如何判断kbmMWClientQuery当前记录的增改状态?

    有朋友问我,客户端使用了kbmMWClientQuery,对其进行了编辑后,对于指定的记录,如何判断是否是增加的记录,或者是被修改后的记录? 下面这个函数,返回aDataSet当前记录的修改状态: f ...