搜索
首页运维NginxNginx怎么解决WebApi跨域二次请求及Vue单页面的问题

一、前言

由于项目是前后端分离,api接口与web前端 部署在不同站点当中,因此在前文当中webapi ajax 跨域请求解决方法(cors实现)使用跨域处理方式处理而不用jsonp的方式。

但是在一段时间后,发现一个很奇怪的问题,每次前端发起请求的时候,通过浏览器的开发者工具都能看到在network下同一个url有两条请求,第一条请求的method为options,第二条请求的method才是真正的get或者post,并且,第一条请求无数据返回,第二条请求才返回正常的数据。

二、原因

第一个options的请求是由web服务器处理跨域访问引发的。options是一种预检请求,浏览器在处理跨域访问的请求时,如果判断请求为复杂请求,则会先向服务器发送一条预检请求,根据服务器返回的内容,浏览器判断服务器是否允许访问该请求。如果web服务器采用cors的方式支持跨域访问,在处理复杂请求时这个预检请求是不可避免的。

由于我们的web服务器采用cors来解决跨域访问的问题,同时在header中添加了自定义参数以及使用json格式来进行数据交互,导致我们的每次请求都是复杂请求,从而产生每次请求都会发送两条请求的现象。

产生原因如下:

使用cors解决跨域问题

三、解决方案

3.1 nginx

3.1.1 思路

将前端项目部署在nginx当中,通过代理的方式来解决跨域请求问题

3.1.2 实现

3.1.2.1 安装 nginx

windows 下 安装 nginx 最简单,直接下载压缩包,然后解压后

3.1.2.2 配置 nginx

已自带默认配置,如要部署vue、angular这种单页面应用,将打包后的index.html文件以及dist目录放到发布目录中,将路径复制,用于配置nginx服务指向

配置文件如下:

server {
 listen 9461; # 监听端口号
 server_name localhost 192.168.88.22; # 访问地址
 location / {
 root 项目路径; # 例如:e:/publish/xxx/;
 index index.html;
 
 # 此处用于处理 vue、angular、react 使用h5 的 history时 重写的问题
 if (!-e $request_filename) {
 rewrite ^(.*) /index.html last;
 break;
 }
 }
 
 # 代理服务端接口
 location /api {
 proxy_pass http://localhost:9460/api;# 代理接口地址
 }
 }

3.1.2.3 nginx 常用命令

启动:start nginx

重新加载配置:nginx -s reload

重新打开日志文件:nginx -s reopen

测试配置文件是否正确:nginx -t [可选:指定路径]

快速停止:nginx -s stop

有序停止:nginx -s quit

3.1.3 nginx 单页面应用h5 history url重写

支持

vue、angular、react

原因

实现单页面时,刷新页面会产生页面找不到的问题,所以需要重写url地址到index.html当中。

注意点

在使用nginx中url重写的时候,一直报错如下

Nginx怎么解决WebApi跨域二次请求及Vue单页面的问题

检查后,发现 if 和 ( 之间必须有个空格。

3.2 other

3.2.1 思路

既然要发送预检请求,是否可以减少预检请求的次数?

例如可以设定一个有效期,在有效期内不再重复预检。

3.2.2 实现

可以在服务端处预检完成后加入一个access-control-max-age请求头来解决这个问题。

3.2.3 cors 响应字段说明

access-control-allow-methods

该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。

注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

access-control-allow-headers

如果浏览器请求包括access-control-request-headers字段,则access-control-allow-headers字段是必需的。

它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在"预检"中请求的字段。

access-control-allow-credentials

该字段与简单请求时的含义相同。

access-control-max-age

该字段可选,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是20天(1728000秒),即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求。

access-control-allow-methods: get, post, put
access-control-allow-headers: x-custom-header
access-control-allow-credentials: true
access-control-max-age: 1728000

以上是Nginx怎么解决WebApi跨域二次请求及Vue单页面的问题的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:亿速云。如有侵权,请联系admin@php.cn删除
Vue常见面试题汇总(附答案解析)Vue常见面试题汇总(附答案解析)Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题(附答案解析)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

vue中props可以传递函数吗vue中props可以传递函数吗Jun 16, 2022 am 10:39 AM

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。