node与vue结合的前后端分离跨域问题

Posted 2020-10-15 与你在巅峰相会

第一点：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);
注意：使用顺序，请按照上述的代码顺序依次引入，否则任有可能报错