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

要想本地正常的调试,解决的办法有三个:

一、后台更改header

1
2
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式   
这样就可以跨域请求数据了。 二、使用JQuery提供的jsonp (注:vue中引入jquery,自行百度) 1
2
3
4
5
6
7
8
9
10
11
12
13
14
methods: {
getData () {
var self = this
$.ajax({
url: 'http://f.apiplus.cn/bj11x5.json',
type: 'GET',
dataType: 'JSONP',
success: function (res) {
self.data = res.data.slice(0, 3)
self.opencode = res.data[0].opencode.split(',')
}
})
}
}
   通过这种方法也可以解决跨域的问题。 三、使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 例如请求的url:“http://f.apiplus.cn/bj11x5.json” 1、打开config/index.js,在proxyTable中添写如下代码: proxyTable: {
'/api': { //使用"/api"来代替"http://f.apiplus.c"
target: 'http://f.apiplus.cn', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': 'http://f.apiplus.cn' //路径重写
}
}
}
2、使用axios请求数据时直接使用“/api”: getData () {
axios.get('/api/bj11x5.json', function (res) {
console.log(res)
})
通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下: let serverUrl = '/api/' //本地调试时
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时
export default {
dataUrl: serverUrl + 'bj11x5.json'
}
调试时定义一个serverUrl来替换我们的“/api”,最后打包时,只需要将“http://www.xxx.com”替换这个“/api”就可以了。

  

vue跨域解决方法 及设置api路径方法的更多相关文章

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

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

  2. vue跨域解决方法

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

  3. vue跨域解决及打包

    打包之前需要修改如下配置文件: 配置文件一:build>>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件( ...

  4. JavaScript跨域解决方法大全

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

  5. jquery.ajax 跨域请求webapi,设置headers

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 1.第一步 服务端 ...

  6. vue 跨域 springCloud @CrossOrigin注解

    vue 跨域  springCloud @CrossOrigin注解 一丶什么是跨域 跨域问题来源于浏览器的同源策略,浏览器为了提高网站的安全性,在发送ajax请求时,只有在当前页面地址与请求地址的协 ...

  7. JavaScript跨域解决办法

    在找到跨域解决办法之前,我们要先弄清楚一些基本概念 什么是跨域? 什么是“同源策略”? 跨文档消息通信 & 跨域请求数据 主域相同而子域不同 不同域名的跨域访问 什么是跨域? 简单地理解就是因 ...

  8. js跨域解决方式

    什么是跨域? 概念:仅仅要协议.域名.port有不论什么一个不同,都被当作是不同的域.(所谓同源是指,域名.协议,port同样.),对于port和协议的不同,仅仅能通过后台来解决. URL 说明 是否 ...

  9. spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除,限制为图片代码等相关配置

    spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ ...

随机推荐

  1. C++实现从尾到头打印链表(不改变链表结构)

    /* * 从尾到头打印链表.cpp * * Created on: 2018年4月7日 * Author: soyo */ #include<iostream> #include<s ...

  2. 数据库无法访问,用户 NT AUTHORITY/SYSTEM或NT AUTHORITY\NETWORK SERVICE登录失败的解决办法

    问题:win7中的在IIS 7.0中,在 Default Web Site 目录下挂一虚拟目录. 在相应的应用程序池 DefaultAppPool 设置标识设置成NetworkService. 但是打 ...

  3. LayUI table表格控件 如何显示 对象中的属性(针对Mybatis的级联查询--一对一情况)

    1.entity如下: 2.Mybatis的Mapper.xml文件如下 <resultMap id="BaseResultMapPlus" type="dicIt ...

  4. 利用插件(jQuery-ui.js)实现表格行的拖拽排序

    template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...

  5. bzoj 5277: [Usaco2018 Open]Out of Sorts【冒泡排序瞎搞】

    首先考虑快排的递归什么时候停下,显然是当前段只剩下一个数了,也就是一个数两边出现分隔符 然后再考虑计算冒泡长度这个操作,因为有分割,所以我们可以把这些放到一起冒泡,这和递归每个区间冒泡是等价的 所以答 ...

  6. poj 2398 Toy Storage【二分+叉积】

    二分点所在区域,叉积判断左右 #include<iostream> #include<cstdio> #include<cstring> #include<a ...

  7. CCF2016.4 - B题

    思路:创建两个bool数组来模拟下落过程,一个存放面板状态,一个存放下落的格子.检测格子和面板对应位置是否同时为True,如果是则有冲突,不能继续下落,否则增加行号.为了统一处理,我们把面板最下面加一 ...

  8. 由 var str = 'hello world' str.attr ='666'; 到包装类型

    近期有些小伙伴在公司的一道面试题踩了坑,  今天特地跟大家一起分享下: 原题如下: var str = 'hello world'; str.attr = '666'; console.log(str ...

  9. _bzoj1014 [JSOI2008]火星人prefix【Splay】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1014 天,写kth()时,把判断条件k <= siz[ch[x][0]]错写成了k & ...

  10. javascript实现弹层效果

    首先,需要有一个按钮来模拟登录: <button id="btnLogin"class="login-btn">登录</button> ...