Axios,基于Promise的HTTP客户端,可以工作于浏览器中,也可以在node.js中使用。
$ npm i axios -S
此文件夹中首先创建一个index.js文件
编写里面的内容:
//引入axios import axios from 'axios'; //创建一个变量看当前环境是否是开发环境 const isDev = process.env.NODE_ENV === "development" //创建axios实例 const ajax = axios.create({ //根URL 可以在这做判断是否是在开发环境下,比如: baseURL:isDev ? 'http://rap2api.taobao.org/app/mock/160905' : '真实项目接口地址' }) //导出getInformation方法获取ajax信息 export const getInformation = ()=>{ return ajax.post('/api/stuInformation') }
(笔者是Vue项目,下方内容请自行调整)
在你的main.js文件里面编写如下内容:
//引入所有的ajax异步请求 import * as $http from './request';//你的文件目录可能与笔者不一致,需要修改 //给Vue的实例中挂载$http,赋值requests里面的所有方法 Vue.prototype.$http = $http;
在想要数据的界面里面添加created生命周期,然后调用this.$http.方法名(在requests里面定义的方法名)
然后用promise的.then() .catch()方法继续处理响应内容
将数据弄到当前组件的data里面然后用就可以了
回到requests文件夹的index.js文件里增加内容:
//请求拦截器 axios.interceptors.request.use(config => { //加自己的业务逻辑 return config; }) //响应拦截器 axios.interceptors.response.use(res => { //加自己的业务逻辑 return res; })
import axios from 'axios' axios.defaults.withCredentials=true; // 让ajax携带cookie
原生ajax请求方式:
var xhr = new XMLHttpRequest(); xhr.open("POST", "http://xxxx.com/demo/b/index.php", true); xhr.withCredentials = true; //支持跨域发送cookies xhr.send();
jquery的post方法请求:
$.ajax({ type: "POST", url: "http://xxx.com/api/test", dataType: 'jsonp', xhrFields: {withCredentials: true}, crossDomain: true, })
服务器端设置:
header("Access-Control-Allow-Credentials: true"); header("Access-Control-Allow-Origin: http://www.xxx.com");
前后端分离,用nginx做请求跨域处理。用了fetch来替代ajax,访问正常,但是请求时没带cookie,就加了credentials: “include”
var myHeaders = new Headers(); fetch(url, { method: 'GET', headers: myHeaders, credentials: "include" })
在后台配置
response.setHeader("Access-Control-Allow-Credentials","true");