当你启动一个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. Leaf Sets CodeForces - 1042F (树,最小划分)

    大意: 给定树, 求叶子的最小划分, 使得每个划分内任意两个叶子距离不超过k. 任选一个非叶结点, 贪心合并. #include <iostream> #include <sstre ...

  2. git的详细安装

    git的详细安装 Git 是时候动手尝试下 Git 了,不过得先安装好它.有许多种安装方式,主要分为两种,一种是通过编译源代码来安装:另一种是使用为特定平台预编译好的安装包. 从源代码安装 若是条件允 ...

  3. python操作MySQL数据库(转)

    先来一个简单的例子吧: ? 1 2 3 4 5 6 7 8 9 10 import MySQLdb   try:     conn=MySQLdb.connect(host='localhost',u ...

  4. 这是一个用于判断IE浏览器版本的紧凑脚本

    这是一个用于判断IE浏览器版本的紧凑脚本IE浏览器,不管它们是什么版本,总是与Web标准有些不兼容.对于编码人员来说,这很困难.为了考虑IE的兼容性,不管它是写CSS还是写JS,IE通常都会被特殊处理 ...

  5. git托管代码

    安装git 在github上创建仓库 搞钥匙 在vscode上托管 初次在不同电脑上上传代码报错 解决:git pull --rebase origin master 链接:https://blog. ...

  6. mintUI和mUI

    mintUI 安装: npm install mint-ui -S 引入: // 按需引入部分组件 import { Cell, Checklist } from 'mint-ui'; Vue.com ...

  7. 一步步创建第一个Vue项目

    写在了GitHub https://github.com/TaoPanfeng/vue-cms 1 初始化 创建一个文件夹 vue-cms 在vue-cms目录下创建文件 package.json 在 ...

  8. Shell脚本——for,while,until循环

    1.for循环: 语句格式: for i in 循环判断 do 循环体 done 举例:九九乘法表(for循环版本) #!/bin/bash # Author: Sean Martin # Blog: ...

  9. Redis的keyspace notification(键空间通知)

    文章来源https://www.cnblogs.com/tinywan/p/5903988.html 一.需求分析: 设置了生存时间的Key,在过期时能不能有所提示? 如果能对过期Key有个监听,如何 ...

  10. mac+django(1.8.2)+uwsgi+nginx 部署

    一. uwsgi 安装 检验 配置uwsgi.ini 1. 安装 pip3 install uwsgi 2. 检验 方法一(uwsgi启动文件): test.py内容如下: def applicati ...