vue下axios和fetch跨域请求

1.在config的index.js下面进行常用跨域配置代码;
proxyTable: {
'/apis': { //使用"/api"来代替"http://xxxx.cn"
target: 'http://xxxx.cn', //源地址 (接口域名)
changeOrigin: true, //改变源 (是否跨域)
pathRewrite: {
'^/apis': 'http://xxxx.cn' //路径重写 (正常请求接口的简写)
}
}
}
2.利用axios的post方式组件内发起请求
this.$axios.post("/apis/test/testToken.php",{username:"hello",password:"123456"})
.then(res => {
console.log(res)
}).catch(err=>{
console.log(err)
})
3.这几个axios常用设置可在封装axios的api中写上也可以在main.js写上
axios.defaults.headers.common['token'] = "f4c902c9ae5a2a9d8f84868ad064e706" //设置header里面的token依据需求设置
axios.defaults.headers.post["Content-type"] = "application/json" //设置请求头可要可不要
Vue.prototype.$http = axios //全局可要使用this.$http来发起请求
4.使用fetch API的形式请求接口数据
fetch("/apis/test/testToken.php", {
method: "post",
headers: {
"Content-type": "application/json",
token: "f4c902c9ae5a2a9d8f84868ad064e706"
},
body: JSON.stringify({ username: "henry", password: "321321" })
})
.then(result => {
console.log(result)
return result.json()
})
.then(data => {
console.log(data)
})
vue下axios和fetch跨域请求的更多相关文章
- VUE系列三:实现跨域请求(fetch/axios/proxytable)
1. 在 config/index.js 配置文件中配置proxyTable 'use strict' // Template version: 1.3.1 // see http://vuejs-t ...
- 【原】fetch跨域请求附带cookie(credentials)
HTTP访问控制 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 解决跨域的方式有很多种,本文介绍" ...
- 【fetch跨域请求】cors
当使用fetch 发起跨域请求时,CORS(跨域资源共享Cross-origin resource sharing) 请求fetch const body = {name:"Good boy ...
- SpringBoot下如何配置实现跨域请求?
一.什么是跨域请求? 跨域请求,就是说浏览器在执行脚本文件的ajax请求时,脚本文件所在的服务地址和请求的服务地址不一样.说白了就是ip.网络协议.端口都一样的时候,就是同一个域,否则就是跨域.这是由 ...
- javascript fetch 跨域请求时 session失效问题
javascript 使用fetch进行跨域请求时默认是不带cookie的,所以会造成 session失效. fetch(url, { method: 'POST', credentials: 'in ...
- nginx配置允许指定域名下所有二级域名跨域请求
核心原理是根据请求域名匹配是否是某域名的二级域名判断是否添加允许跨越头. #畅游www server { listen 8015; server_name test-tl.changyou.com; ...
- Vue中axios访问 后端跨域问题
public class AllowOriginFilter implements Filter { @SuppressWarnings("unused") public void ...
- MediaElement.js之浏览器跨域请求视频播放
浏览器跨域问题一直以来都是作为前端开发人员常见的问题,所以今天学习了下如何使浏览器跨域请求资源 需要了解的知识 -域(主域,子域,什么是跨域) 简单来说由于浏览器同源策略,凡是发送请求url的协议(h ...
- jQuery jsonp跨域请求
跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...
随机推荐
- Oracle:imp导入imp-00000问题
现场环境:window2008 . oracle11.2g .客户端安装的是oracle10g一个简洁版 34M的. 在imp导入时,提示 Message 100 not found; No mes ...
- 转:创建表空间,删除后再次创建,报错ORA-01119
原文:http://www.it2down.com/it-oracle-develop/57816.htm 我是个ORACLE新手,在删除了表空间,然后再创建怎么会提示出错? 删除表空间:drop t ...
- hdu 4022 Bombing(map,multiset)
题意:n个基地放在2维平面,然后m个炸弹人,每个炸弹人可以炸一行或者一列,输出每个炸弹人炸掉的基地个数. 思路:用map<int,multiset<int> >对应起来一行或者 ...
- NOIP2004题解
传送门 考查题型 dp 搜索 模拟 数据结构堆 贪心 T1 津津的储蓄计划 题目描述 津津的零花钱一直都是自己管理.每个月的月初妈妈给津津300元钱,津津会预算这个月的花销,并且总能做到实际花销和 ...
- CoreGpaphics
CoreGpaphics基本应用 CGAffineTransformMake开头的函数 是基于最初始的位置来变化的 带有CGAffineTransform参数是基于CGAffineTransform的 ...
- mysql5.7根据.frm和.ibd文件恢复表结构和数据
一.恢复表结构 1.环境:Windows .mysql5.7:首先创建一个数据库,可以通过navicat来创建: 2.使用当前创建的数据库:use ww; 3.随意创建一张表,但是这张表的名字 ...
- 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时1
课时1 计算机视觉历史回顾与介绍上 CS231n:这一一门关于计算机视觉的课程,基于一种专用的模型架构,叫做神经网络(更细一点说,是卷积神经网络CNN).计算机视觉是人工智能领域中发展最为迅猛的一个分 ...
- (水题)洛谷 - P1022 - 计算器的改良
https://www.luogu.org/problemnew/show/P1022 服了,居然还有+0.000和-0.000的不同,真的服了. #include<bits/stdc++.h& ...
- Tenka1 Programmer Beginner Contest D - IntegerotS(位运算)
传送门 题意 给出N,K,给出N对数a[i],b[i],选择一些数使得or和小于k且\(max\sum b[i]\) 分析 枚举k的每一个1位,将其删去并让低位全为1,对于每一个这样的数c,如果a[i ...
- PTA 朋友圈【并查集的合并问题】
一开始,考虑的是每次就是把第一个作为祖先,这样很明显是错误的,比如 7 4 3 1 2 3 2 4 2 3 5 6 7 1 6 所以这正是更好地体现对于集合的代表.只有把所有的元素合并一下,然后选一个 ...