生产环境跨域配置代理转发

2021-09-05 10:01:08 阅读：188 来源： 互联网

标签：const 跨域 koa app 代理 api 转发 public

生产环境代理转发

前端需要设置生产环境的baseUrl

.env.production

VUE_APP_BASE_API = '生产环境使用的url'

由于直接访问api接口会出现跨域问题我们需要配置一个单独的代理转发服务让页面访问这个代理服务器然后通过代理服务去访问api接口

建立web服务文件夹 hrServer
在该文件夹下，初始化npm
```
npm init -y
```
安装服务端框架koa(也可以采用express或者egg)
```
npm install koa koa-static
```
安装跨域代理中间件
```
npm install koa2-proxy-middleware 
```
修改项目中的环境变量
VUE_APP_BASE_API = ‘/api’
```
VUE_APP_BASE_API = '/api'
```
hrServer中新建public目录，并拷贝打包的dist目录内容，到**hrServer/public**下
目录结构如下

在根目录下创建app.js，代码如下

const Koa = require('koa');
const serve = require('koa-static');

const { historyApiFallback } = require('koa2-connect-history-api-fallback');

const proxy = require('koa2-proxy-middleware')
const app = new Koa();

app.use(proxy({
  targets: {
    '/api/(.*)': {
        //后端服务器地址
        target: 'http://localhost:3000', //后端服务器地址
        changeOrigin: true
    }
  }
}))

// 这句话 的意思是除接口之外所有的请求都发送给了 index.html
app.use(historyApiFallback({ 
  whiteList: ['/api']
}));  // 这里的whiteList是 白名单的意思


app.use(serve(__dirname + "/public")); //将public下的代码静态化

app.listen(3333);

运行流程
# 项目运行流程

完整项目在本地运行流程在生产环境下本地启动一个node服务进行代理转发解决跨域问题

## 使用node 运行app.js

访问的时候是访问的代理服务器所启动的端口

## 访问地址127.0.0.1:3333

标签：const,跨域,koa,app,代理,api,转发,public
来源： https://blog.csdn.net/weixin_42343307/article/details/120110682

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

生产环境跨域 配置代理转发

生产环境代理转发

生产环境跨域配置代理转发