首页 > 其他分享 >部署前端时OpenResty配置问题

部署前端时OpenResty配置问题

时间:2023-11-05 11:38:21浏览次数:38  
标签:Control cn 部署 前端 Access header add proxy OpenResty

问题出现

项目最初只在小程序上部署了接口,那时后端没有考虑跨域的问题。然而,随着管理后台的上线,问题变得明显起来:

  • 前端域名:a.**.cn
  • 后端域名:api.**.cn

一开始还是开了前端cros跨域,但是调用的时候是a..cn/api/,出现了502 gateway, 网关找不到服务器。以为是生产环境只能这样配置,于是把前端部署到了api.**.cn/api/上,但以上问题还是出现,看来生产环境不能用前端跨域解决问题。

解决方案的转变

于是,关闭了前端的CORS跨域设置,并将接口地址直接更改为api.**.cn。然而,这次遇到了403 Forbidden的问题:

request URL:
https://api.**.cn/groups/loginManagement
Request Method:
OPTIONS
Status Code:
403 Forbidden

这时候已经查阅了一些资料,将openresty的配置如下

location ^~ / {
proxy_pass http://127.0.0.1:8585;
proxy_set_header Host $host;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Credentials true;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
add_header Cache-Control no-cache;
}

看了很多资料,最主要的原因还是各种请求并没有转发出去,于是问了GPT

给出解释如下:

你的跨域设置需要在所有响应中都生效,而不仅仅是在OPTIONS请求中。你可以添加 if ($request_method = 'OPTIONS') 条件来确保这些设置在OPTIONS请求中生效。

if ($request_method = 'OPTIONS') {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Credentials true;
    add_header Access-Control-Allow-Headers $http_access_control_request_headers;
    add_header Content-Type 'text/plain charset=UTF-8';
    add_header Content-Length 0;
    return 204;
}

最终成功跨域调用了接口,但以后还是记得刚开始就在后端配置跨域吧

标签:Control,cn,部署,前端,Access,header,add,proxy,OpenResty
From: https://blog.51cto.com/u_16091372/8190757

相关文章

  • 【趣味Javascript】前端开发中不为人知的LHS和RHS查询,你真的弄明白了吗? 《1024程序
    ......
  • Django 表单处理:从前端到后台的全流程指南
    Django作为一个高级PythonWeb框架,它的表单处理能力强大,可以有效地处理用户输入,进行数据验证以及错误处理。本文将详细介绍如何在Django中创建、处理和使用表单。1.Django表单系统的核心Django的表单系统处理表单的生命周期,涉及以下核心部分:表单类:定义表单的结构和行为。验......
  • ChatGLM3本地部署
    如何用免费GPU线上跑AI项目实践-飞书云文档(feishu.cn)准备步骤:1.配置好环境pytorch2.0.1python3.92.进入JupyterLab进入开发环境3.将glm3从开源项目中git下来,这里在terminal输入指令后,输入github的账号密码进行git。gitclone命令:gitclone网址存储地址 4.下载Pytho......
  • 如何将docsify项目部署到centos系统nginx中?
    要将Docsify项目部署到CentOS系统的Nginx中,可以按照以下步骤进行操作:1.在CentOS服务器上安装Nginx: -打开终端并以root用户身份登录到CentOS服务器。 -运行以下命令来安装Nginx:    yuminstallnginx   -安装完成后,启动Nginx服务:    systemctls......
  • 前端学习-JavaScrip学习-js基础01
    学习教程:黑马程序员视频链接JS简介JS组成JavaScrip=ECMAscript(语言基础)+webAPIwebAPI=BOM+DOM资料查询网站:MDN<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="......
  • 安全运营之Zeek开源网络流量分析工具安装部署
    一、zeek简要介绍    Zeek官方网站为https://zeek.org/,官网将其定义为一款开源的网络安全流量分析工具,其前身为Bro,在其官方网站可以找到详细的文档说明,zeek可以以单节点部署,也可以以集群的方式部署。Zeek的架构如下:其中有两个关键的组件,EventEngine以及PolicyScriptInter......
  • 黑马pink学前端 html1
    单标签“”利用vscode快速创建html页面:输入"!"AutoRenameTag:插件,同步修改标签更改vscode的文本格式化的设置,使得保存时自动对齐文本openinbrowser:插件,右键菜单里有打开网页liveserver(推荐):保存之后即可动态更新,无需刷新页面vscode-icons:显示文件的类型图标easy-......
  • 部署SpringBoot的学习笔记
    如何部署微服务到服务器上面?一、后端宝塔下载一键部署Java环境,配置jdk1.8的环境变量分模块部署微服务项目、部署nacos和redislinux部署SpringCloud微服务,宝塔部署_微服务项目可以使用宝塔部署吗-CSDN博客利用宝塔面板部署springboot项目_工地精神的博客-CSDN博客云服务器安......
  • 前端学习路径
    前端学习路径B站学习资源整合网络知识(Internet)1.网络工作原理计算机网络原理:https://www.bilibili.com/video/BV1xJ41137Q32.什么是HTTPHTTP协议详解:https://www.bilibili.com/video/BV1js411g7Fw3.浏览器及工作方式浏览器是如何运作的?:https://www.bilibili.com/video/......
  • .Net 6.0 在Linux部署后特殊格式静态文件404
    转自:https://blog.csdn.net/wxz19960412/article/details/131085819只需要添加如下代码即可:1app.UseStaticFiles();23app.UseStaticFiles(newStaticFileOptions4{5ServeUnknownFileTypes=true//设置不限制content-type6});78//添加特殊类型......