vue+axios+webpack+node配置跨域(用node写代理服务器)

用node设置代理
服务器之间是没有跨域问题的

const http = require('http');
const request = require('request');

const hostname = '127.0.0.1';
const port = 8010;

const interURL = 'https://www.easy-mock.com/mock/5d4b7d772b863e1413ad66ab/iVP' ;
//要访问的接口地址

// 创建一个 API 代理服务
const apiServer = http.createServer((req, res) => {
    const url = interURL  + req.url;
    const options = {
        url: url
    };

    function callback (error, response, body) {
        if (!error && response.statusCode === 200) {
            // 设置编码类型,否则中文会显示为乱码
            res.setHeader('Content-Type', 'text/plain;charset=UTF-8');
            // 设置所有域允许跨域
            res.setHeader('Access-Control-Allow-Origin', '*');
            // 返回代理后的内容
            res.end(body);
        }
    }
    request.get(options, callback);
});
// 监听 8010 端口
apiServer.listen(port, hostname, () => {
    console.log(`接口代理运行在 http://${hostname}:${port}/`);
});

在终端运行node 文件 后会显示
在这里插入图片描述
然后在vue项目中引入axios,新建个js,注意上面的代理不要关闭,下面需要监听这个端口

/* axios封装 */
import axios from 'axios';

//基本配置
const Util = {
  apiPath: 'http://127.0.0.1:8010/',
};

//Ajax通用配置
Util.ajax = axios.create({
  baseURL: Util.apiPath
});
//添加响应拦截器
Util.ajax.interceptors.response.use(res => {
  return res.data;
});

export default Util;

需要使用的地方:

	import $ from 文件地址;
	  $.ajax.get('接口')
          .then(res => {
            console.log('1');
            console.log(res);
          })
          .catch(error => {
            console.log(error);
          });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值