使用服务端代理接口解决跨域

JavaScript 2021-01-21 219

不用配置麻烦的webpack,一个脚本就可以解决代理的问题,也不需要添加什么js文件啥的。

安装插件:

cnpm install koa --save-dev
cnpm install http-proxy-middleware --save-dev
cnpm install koa2-cors --save-dev

代码:

const Koa = require('koa');
const {createProxyMiddleware} = require('http-proxy-middleware');

const app = new Koa();
const cors = require('koa2-cors'); // 解决本地端口不一致的跨域
// 解决预检,解决跨域会导致2次请求
// 文章:https://blog.csdn.net/weixin_43076388/article/details/94599215
//跨域代理
app.use(cors({
    // 添加 Access-Control-Max-Age ,这个参数的意思是把 OPTIONS 响应缓存起来,
    // 在指定的时间内,不会再次发起 OPTIONS 预请求,这样只有在第一次请求的时候会有 OPTIONS
    maxAge: 2592000,
}));

app.use(async (ctx, next) => {
    if (ctx.url.startsWith('/api')) {
        ctx.respond = false;// 解决线上的跨域问题
        ctx.body = createProxyMiddleware({
            target: 'http://zlx.cool:5000', // 服务器地址
            changeOrigin: true,
            "pathRewrite": {
                "^/api": ""
            }
        })(ctx.req, ctx.res, next)
    }
    // next()
});

/* 代理配置 end */
const hostName = '127.0.0.1'; //本地IP
const port = 5000; //端口
app.listen(port, hostName, () => {
    console.log(`服务运行在http://${hostName}:${port}`);
});

 

标签:JavaScript

文章评论

评论列表

已有0条评论