关于解决axios在webpack中跨域的问题

前提准备

假设已经安装了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(\'服务器已启动.....\');})