axios跨域请求遇到的问题
个人的小demo,用vue构建前台,配合axios做ajax请求。后台服务器用node+experss搭建。遇到的几个问题做下总结:1 node+express后台需要开通权限供前台发送ajax请求。可增加中间件:app.use((req, res, next) => {// 允许的请求主机名及端口号 也可以用通配符*, 表示允许所有主机请求res.setHeader('Acce
·
个人的小demo,用vue构建前台,配合axios做ajax请求。后台服务器用node+experss搭建。遇到的几个问题做下总结:
1 node+express后台需要开通权限供前台发送ajax请求。可增加中间件:
app.use((req, res, next) => {
// 允许的请求主机名及端口号 也可以用通配符*, 表示允许所有主机请求
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
// 允许请求携带cookie
res.setHeader('Access-Control-Allow-Credentials', true);
// 允许的请求方式
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// 允许的请求头
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
next();
});
2 用axios发送请求时,后台保存了session,但是在前台每次刷新页面的时候,发现从后端请求到的session值每次都不一样。以下是axios的关于跨域cookie的说明:
// `withCredentials` indicates whether or not cross-site Access-Control requests
// should be made using credentials
withCredentials: true, // default
把默认配置withCredentials改为true,就可以允许跨域携带cookie信息了。vue的入口文件如下:
import Vue from 'vue'
import axios from 'axios'
import App from './App'
import router from './router'
axios.defaults.withCredentials=true;
Vue.prototype.$http = axios;
Vue.config.productionTip = true
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
这样每次发送ajax请求后,只要不关闭浏览器,得到的session数据都是一致的。
更多推荐
已为社区贡献3条内容
所有评论(0)