化解WebApi跨域二次呼吁以及Vue单页面难点澳门新葡亰网址

一、前言

出于项目是左右端分离,API接口与Web前端
布署在分化站点当中,因而在前文当中WebApi Ajax
跨域请求解决措施(CORS完结)
使用跨域处理方式处理而不用Jsonp的方式。

但是在一段时间后,发现一个很奇怪的标题,每回前端发起呼吁的时候,通过浏览器的开发者工具都能来看在Network下同一个url有两条请求,第一条请求的MethodOPTIONS,第二条请求的Method才是当真的Get或者Post,并且,第一条请求无数据重返,第二条请求才回去正常的数目。

一、前言

由于体系是上下端分离,API接口与Web前端
安排在分歧站点当中,因而在前文当中WebApi Ajax
跨域请求解决办法(CORS落成)
采用跨域处理情势处理而不用Jsonp的方式。

不过在一段时间后,发现一个很意外的题材,每一遍前端发起呼吁的时候,通过浏览器的开发者工具都能观察在Network下同一个url有两条请求,第一条请求的MethodOPTIONS,第二条请求的Method才是真的的Get或者Post,并且,第一条请求无数据重临,第二条请求才重回正常的数目。

二、原因

第一个OPTIONS的呼吁是由WEB服务器处理跨域访问引发的。OPTIONS是一种预检请求,浏览器在处理跨域访问的伏乞时,借使判断请求为复杂性请求,则会先向服务器发送一条预检请求,按照服务器重返的情节,浏览器判断服务器是还是不是允许访问该请求。倘若WEB服务器选择CORS的艺术襄助跨域访问,在处理千丝万缕请求时这么些预检请求是不可幸免的。

是因为大家的WEB服务器采纳CORS来缓解跨域访问的题材,同时在header中添加了自定义参数以及使用json格式来拓展数据交互,导致大家的每趟请求都是错综复杂请求,从而发出每趟请求都会发送两条请求的情景。

暴发原因如下:

  • 使用CORS缓解跨域难点

二、原因

第一个OPTIONS的呼吁是由WEB服务器处理跨域访问引发的。OPTIONS是一种预检请求,浏览器在拍卖跨域访问的请求时,要是判断请求为复杂性请求,则会先向服务器发送一条预检请求,按照服务器重返的内容,浏览器判断服务器是还是不是允许访问该请求。如若WEB服务器选用CORS的办法扶助跨域访问,在拍卖千头万绪请求时那个预检请求是不可幸免的。

由于大家的WEB服务器选取CORS来化解跨域访问的标题,同时在header中添加了自定义参数以及使用json格式来开展数量交互,导致大家的每一次请求都是叶影参差请求,从而发出每趟请求都会发送两条请求的场景。

爆发原因如下:

  • 使用CORS竭泽而渔跨域问题

三、解决方案

三、解决方案

3.1 Nginx

3.1 Nginx

3.1.1 思路

  • 将前端项目配置在Nginx中间,通过代理的主意来解决跨域请求难题

3.1.1 思路

  • 将前端项目布置在Nginx中等,通过代理的艺术来化解跨域请求难题

3.1.2 实现

3.1.2 实现

3.1.2.1 安装 Nginx

Windows 下 安装 Nginx 最简便易行,直接下载压缩包,然后解压后

3.1.2.1 安装 Nginx

Windows 下 安装 Nginx 最简易,直接下载压缩包,然后解压后

3.1.2.2 配置 Nginx

已自带默认配置,如要陈设VueAngular那种单页面应用,将包装后的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.2 配置 Nginx

已自带默许配置,如要安排VueAngular那种单页面应用,将打包后的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.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重写的时候,一贯报错如下
    澳门新葡亰网址 1
    检查后,发现 if( 之间必须有个空格。

3.1.3 Nginx 单页面应用H5 History Url重写

  • 支持
    Vue、Angular、React
  • 原因
    心想事成单页面时,刷新页面会爆发页面找不到的题材,所以必要重写Url地址到index.html当中。
  • 注意点
    在使用Nginx中URL重写的时候,一贯报错如下
    澳门新葡亰网址 2
    检查后,发现 if( 之间必须有个空格。

3.2 Other

3.2 Other

3.2.1 思路

  • 既是要发送预检请求,是还是不是足以减掉预检请求的次数?
  • 比如可以设定一个有效期,在有效期内不再重复预检。

3.2.1 思路

  • 既是要发送预检请求,是或不是可以减掉预检请求的次数?
  • 例如可以设定一个有效期,在有效期内不再重复预检。

3.2.2 实现

可以在劳动端处预检达成后加盟一个Access-Control-Max-Age恳请头来解决这一个题材。

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

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

四、参考文献

四、参考文献

相关文章

Leave a Comment.