前提准备

假设已经安装了webpack webpack-cli axios并且已经封装好请求函数(关于封装请求函数的可以看上一篇文章)

在开发过程中即development环境中,经常会和后台的同事进行接口的联调服务,如果后台没有相关的配置
经常会出现跨域的问题

本地地址为http://localhost:8080请求响应地址为http://localhost:3030.因为端口号不同,所以才会出现跨域的这种情况.前端是在本地起的一个webserver服务器,后端是搭建了一个node服务器

const http=require('http');
let server=http.createServer();
 server.on('request',(req,rsp)=>{
    rsp.setHeader('Content-type','text/json;charset=utf-8');
    if(req.url=='/'){
        rsp.end('pppp');
    }else if(req.url=='/login'){
        let obj={
            "status":"0",
            "message":"OK",
            "data":[
                {
                    "mag":'123',
                    "const":'456'
                }
            ]
        }
        rsp.end(JSON.stringify(obj));
    }else if(req.url=='/registor'){
        let obj={
            "status":"0",
            "message":"OK",
            "data":[
                {
                "id":123,
                "age":"487"
                },{
                "id":123,
                "age":"487"
                },{
                "id":123,
                "age":"487"
                },{
                "id":123,
                "age":"487"
                },{
                "id":123,
                "age":"487"
                }
            ]
        }
        rsp.end(JSON.stringify(obj));
    }else{
        rsp.end('404 NOT FONT');
    }
})
server.listen(3030,()=>{
    console.log('服务器已启动.....');
})

以上是后端的代码

方法一、配置webpack.config.js

因为咱们在本地搭建的webpack-dev-server所以很容易想到通过在webpack.config.js中配置跨域的请求,在webpack.config.js文件中,增加devServer的配置项来进行设置

const path=require('path')
module.exports={
  entry:'./src/index.js',
  mode:"production",
  output:{
    filename:'index.js',
    path:path.resolve(__dirname,'dist'),
  },
  module:{
    rules:[{
      test:/\.ts$/,
      use:'ts-loader',
    }]
  },
  devServer:{
    contentBase:'./dist',
    port:8080,
    open:true,
    index:'',//如果代理的地址为'/',即根目录可以增加此选项
    proxy:{
      '/registor':"http://localhost:3030/"
    }
  }
}

更多的devServer配置请参考webpack官方文档
在util.js中更换原来的BASE_API,

import request from './request'
//const BASE_API='http://localhost:3030/'
const BASE_API='/'
//封装get方法
export function getfn(param){
  let url=BASE_API+'registor';
  return request.get(url,param)
}
//封装post方法
export function postfn(param){
  let url=BASE_API+'registor';
  return request.post(url,param);
}

重启本地devServer服务器

在这里就有一个问题,因为devServer是运行在开发环境中的,在打包的时候有可能还会涉及到跨域,所以这个时候配置devServer就显得很苍白无力了

方法二、配置后端

前端做的毕竟有限,如果交给后端解决的话就轻松好多了

const http=require('http');
let server=http.createServer();
 server.on('request',(req,rsp)=>{
    rsp.setHeader('Access-Control-Allow-Origin','*');//增加此项请求头部
    rsp.setHeader('Content-type','text/json;charset=utf-8');
    if(req.url=='/'){
        rsp.end('pppp');
    }else if(req.url=='/login'){
        let obj={
            "status":"0",
            "message":"OK",
            "data":[
                {
                    "mag":'123',
                    "const":'456'
                }
            ]
        }
        rsp.end(JSON.stringify(obj));
    }else if(req.url=='/registor'){
        let obj={
            "status":"0",
            "message":"OK",
            "data":[
                {
                "id":123,
                "age":"487"
                },{
                "id":123,
                "age":"487"
                },{
                "id":123,
                "age":"487"
                },{
                "id":123,
                "age":"487"
                },{
                "id":123,
                "age":"487"
                }
            ]
        }
        rsp.end(JSON.stringify(obj));
    }else{
        rsp.end('404 NOT FONT');
    }
})
server.listen(3030,()=>{
    console.log('服务器已启动.....');
})