标签：完成后 response 返回 cookie 数据 pos option router ring
第一点：node作为服务端提供数据接口，vue使用axios访问接口，
安装axios
npm install axios --save
安装完成后在main.js中增加一下配置：
import axios from ‘axios‘; axios.defaults.withCredentials=true
Vue.prototype.$axios = axios;
main.js全部配置如下：
import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ import axios from ‘axios‘; axios.defaults.withCredentials=true; Vue.prototype.$axios = axios; Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: ‘#app‘, router, template: ‘<App/>‘, components: { App } })
withCredentials默认是false，意思就是不携带cookie信息，那就让它为true，我是全局性配置的，就是main.js中的这句话：
axios.defaults.withCredentials=true;
得到数据有两种方式：
第一种Get请求，写法为
this.$axios.get("远程服务地址URL",{ withCredentials : true//可以带cookie的认证 }).then(function(res){ //对返回的数据res进行处理的逻辑 })
第二种Post请求：此处一定要对传递的参数进行一次转型，否则报错，使用插件qs（自身携带，引用即可）
this.$axios.post("远程URL", qs.stringify({param},{ withCredentials : true })).then(function(res){ //对返回的数据res进行处理的逻辑 })
以上是属于客户端的针对可以访问远程的配置，要想成功还需服务端的配置，共同配合使用，否则无效任然报错。
在服务端我们需要在app.js中全局配置
//设置跨域访问
var express=require(‘express‘)
var app=express()
app.all(‘*‘, function (req, res, next) { res.header(‘Access-Control-Allow-Headers‘, ‘Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild‘); res.header(‘Access-Control-Allow-Methods‘, ‘PUT, POST, GET, DELETE, OPTIONS‘); res.header("Access-Control-Allow-Credentials", "true"); res.header("Access-Control-Allow-Origin", "此处是你的客户端的Url"); if (req.method == ‘OPTIONS‘) { /*让options请求快速返回*/ res.send(200); } else { next(); } });
需要让ajax请求携带cookie，也就是认证信息，于是在拦截器中，增加了一个需要认证信息的header：
response.setHeader("Access-Control-Allow-Credentials", "true");
然后再次在浏览器中测试，发现浏览器提示，当Access-Control-Allow-Credentials设为true的时候，Access-Control-Allow-Origin不能设为星号，既然不让我设为星号，我就改成前端项目的配置
response.setHeader("Access-Control-Allow-Origin", http://127.0.0.1:8081);
注意：使用顺序，请按照上述的代码顺序依次引入，否则任有可能报错
标签：完成后 response 返回 cookie 数据 pos option router ring
原文地址：http://www.cnblogs.com/bfwbfw/p/7893691.html
