美文网首页
vue开发环境下配置跨域

vue开发环境下配置跨域

作者: Enginner_XZ | 来源:发表于2020-11-28 20:02 被阅读0次

vue根目录下创建vue.config.js

  • 配置devServer的proxy实现跨域
    上代码
module.exports = {
  publicPath : process.env.NODE_ENV === 'production' ? './' : '/',
  devServer: {
    proxy: {
      "/api": {
        target: 'http://localhost:9999', // 前端域名
        changeOrigin: true, // 如果接口跨域 , 需要进行这个参数配置
        pathRewrite: {
          "^/api": ""
        },
      },
    },
  },
};

后台代码(node)

const express = require('express');
const app = express();
const Mock = require('mockjs')
// 引入history代理
const history = require('connect-history-api-fallback');
const data = Mock.mock({
    'list|1-10' : [{
        'id|2-5.2-5' : new Number(1)
    }]
})

console.log(JSON.stringify(data , null , 4))

// app.use( history() );
app.listen( 9999 , 'localhost' , () => {
    console.log('localhost:9999');
})

// app.use(express.static(__dirname+'/src/dist/',{index : "index.html"}));

app.get('/data' , ( request , response )=> { // 请求前面要配合前端设置api的路径
    console.log(request);
    console.log(data);
    response.send({
        msg : 0,
        data : data
    })
})

相关文章

网友评论

      本文标题:vue开发环境下配置跨域

      本文链接:https://www.haomeiwen.com/subject/vgoxwktx.html