49.vue-admin-template请求nodejs跨域问题

本文主要是介绍49.vue-admin-template请求nodejs跨域问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

使用的是vue2

解决方法：

在vue.config,js中加入proxy配置：

devServer: {
    proxy:{
      '/api':{
        target:'http://localhost:3000',//填写后台接口地址
        changeOrigin:true,//设置允许跨域
        pathRewrite: {
          '^/api': '/'
        }
      }
    },
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js')
  },

　　main.js中设置了如下：

import axios from 'axios'
Vue.prototype.$axios = axios
//配置请求的跟路径
axios.defaults.baseURL='/api'

接下来就是vue组件中，编辑点击提交按钮axios：

methods: {
    onSubmit() {
      let formData = new FormData();
      for(var key in this.form){
        formData.append(key,this.form[key]);
      }
 
      axios({
          method:"post",
          url:"/api/form/post",
          headers: {
              "Content-Type": "multipart/form-data",
          "Access-Control-Allow-Origin":"*"
          },
          withCredentials:true,
          data:formData
        }).then((res)=>{
        console.log(res);
      });

      //this.$message('你点击了提交按钮！')
      //console.log(this.form.name,this.form.region,this.form.desc)
    },
    onCancel() {
      this.$message({
        message: '你点击了取消按钮！',
        type: 'warning'
      })
    }
  }

node后端提供了接口：

//新手村的菜单获取

var express = require('express');
var router = express.Router();

//post请求测试
router.post('/post',function(req,res,next){
  res.send("你好,这里是表单提交请求,我是post请求")
})

module.exports = router;

node的app.js引入路由：

var form = require('./routes/form')
var app = express();


//设置跨域问题解决方案
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', ['mytoken','Content-Type']);
    next();
});

//引入各个路由的api
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/api/novice', novice);
app.use('/api/form',form);

再次运行代码，完成，不再报错了：

这篇关于49.vue-admin-template请求nodejs跨域问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！