使用nginx反向代理解决跨域

最新推荐文章于 2024-05-14 16:42:12 发布

G018_star sky♬

最新推荐文章于 2024-05-14 16:42:12 发布

阅读量205

点赞数 1

分类专栏：前端文章标签： node.js javascript vue.js

本文链接：https://blog.csdn.net/qq_42526440/article/details/111054017

版权

前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

需要使用到的包
npm install express --save
npm install --save-dev http-proxy-middleware

以及对应的使用说明文档链接：
https://www.expressjs.com.cn/
https://www.npmjs.com/package/http-proxy-middleware

使用express创建一个本地服务器
默认为3000，可将其改成其他的端口，我这里使用的是9000端口

项目目录如下：
在这里插入图片描述

index.js如下:

// include dependencies
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
//app.get('/',(req,res)=>res.send('hello world'))
// proxy middleware options
const options = {
  target: 'https://www.xxx.com', // target host
  changeOrigin: true, // needed for virtual hosted sites
  ws: true, // proxy websockets
  pathRewrite: {
    /* '^/api/old-path': '/api/new-path', // rewrite path
    '^/api/remove/path': '/path', // remove base path */
    '^api':'',
  },
  /* router: {
    // when request.headers.host == 'dev.localhost:3000',
    // override target 'http://www.example.org' to 'http://localhost:8000'
    'dev.localhost:3000': 'http://localhost:8000',
  }, */
};
 
// create the proxy (without context)
const exampleProxy = createProxyMiddleware(options);
 
// mount `exampleProxy` in web server

app.use('/api', exampleProxy);
//使用express服务器托管静态文件，在目录创建一个public文件夹，并将index.html放入public
app.use(express.static('public'))
app.listen(9000);

index.html如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div onclick="aa()">
    hello world
    </div>
    <script>
        function aa(){
        	//使用fetch发送xhr请求
        	//这里是识别标志，我这里写/api作为识别，以后请求只需要/api，不需要再写全部
            fetch('/api/rand.tbimg.php?format=jpg').then(res=>{
                console.log('hi')
            })
        }
    </script>
</body>
</html>

在终端敲 node index.js 会出现如下提示，但并不影响最终的运行
在这里插入图片描述

运行结果如下：
在这里插入图片描述

解决了跨域问题
记得端口要输入localhost:9000/index.html
第一次访问 200
按F5刷新（第二次访问） 304
按Ctrl+F5强制刷新 200

还有一种方法是在nginx的安装包内修改conf的配置，如下图所示
在这里插入图片描述

G018_star sky♬

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用nginx反向代理解决跨域

需要使用到的包npm install express --savenpm install --save-dev http-proxy-middleware以及对应的使用说明文档链接：https://www.expressjs.com.cn/https://www.npmjs.com/package/http-proxy-middleware使用express创建一个本地服务器默认为3000，可将其改成其他的端口，我这里使用的是9000端口项目目录如下：index.js如下:// inc
复制链接

扫一扫

专栏目录