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跨域请求
跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...
随机推荐
- ubuntu安装wine+plsql
1.在ubuntu下装了win7的虚拟机,在使用plsql进行开发的时候发现很慢很卡,经常半天反应不过来.机器是不差的,1w5的thinkstation,实在受不了这种 速度,想着在ubuntu下搞一 ...
- 并不对劲的bzoj5415:loj2718:uoj393:p4768:[NOI2018]归程
题目大意 \(n\)(\(n\leq2*10^5\))个点,\(m\)(\(m\leq4*10^5\))条边的图,每条边有海拔\(a_i(a_i\leq10^9)\).长度\(l_i(l_i\leq1 ...
- 【TJOI2013】 单词
[题目链接] 点击打开链接 [算法] AC自动机+递推 [代码] #include<bits/stdc++.h> using namespace std; #define MAXN 200 ...
- JAVA泛型与可变参数
泛型的引入: 早期的Object类型可以接收任意的对象类型,但是在实际的使用中,会有类型转换的问题.也就存在这隐患,所以Java提供了泛型来解决这个安全问题. 格式: 泛型类:public class ...
- CoreGpaphics
CoreGpaphics基本应用 CGAffineTransformMake开头的函数 是基于最初始的位置来变化的 带有CGAffineTransform参数是基于CGAffineTransform的 ...
- In-App Purchase Programming Guide----(二) ---- Designing Your App’s Products
Designing Your App’s Products A product is something you want to sell in your app’s store. You creat ...
- PHP empty()函数使用需要注意
在 PHP 5.5 之前,empty() 仅支持变量:任何其他东西将会导致一个解析错误.换言之,下列代码不会生效: empty(trim($name)). 作为替代,应该使用trim($name) = ...
- CSU_1216【异或最大值】
转自:http://blog.csdn.net/fuyukai/article/details/50366133 题目简述: 经典题目,求一个数组中两个数异或运算的最大值.题目极其简单,但是要求的复杂 ...
- Codeforces 702B【二分】
题意: 给一个a数组,输出有多少对相加是等于2^x的.1<=a[i]<=1e9,n<=1e5 思路: a[i]+a[j]=2^x 对于每个a[i],枚举x,然后二分查找a[j]; p ...
- hdoj5698
果然以前不想搞的东西,今天他妈全来了,我要爆炸,除了说操....真是欲哭无泪啊..... //这道题目卡在逆元了.... //利用逆元计算1/(n!(m-n)!) //对于正整数a,m如果有ax≡1( ...