cli项目中的proxyTable跨域问题小结(2)

let express = require('express'); let app = express(); let fs = require('fs'); let list = require('./list'); let bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(express.static(__dirname)); //read function read(cb) { //用来读取数据的，注意自己在mock文件夹下准备一些数据 fs.readFile('./list.json','utf8',function (err,data) { if(err || data.length === 0){ cb([]); // 如果有错误 或者文件没长度 就是空数组 }else{ cb(JSON.parse(data)); // 将读出来的内容转化成对象 } }) } //write function write(data,cb) { // 写入内容 fs.writeFile('./list.json',JSON.stringify(data),cb) } // 注意 没有设置跨域头 app.get('/api/list',function (req,res) { res.json(list); }); app.listen(8000,()=>{ console.log('8000 is ok'); });

3.前端调取的api代码：

import axios from 'axios'; axios.interceptors.response.use((res)=>{ return res.data; // 在这里统一拦截结果 把结果处理成res.data }); export function getLists() { return axios.get('/api/list'); }

4.在组件中进行跨域调取接口，打印数据

随便在一个文件中引入api测试一下 打印出来接口返回的数据

import {getLists} from '../../api/index' export default { async created(){ let dataList=await getLists(); console.log(dataList,"我请求的数据"); },

5.查看控制台，打印出数据，没有保错，代表跨域成功，代理服务成功

开发环境成功跨域了，上线怎么办？

上线要进行nginx反向代理设置，同时应区分环境变量，具体设置请看图片：