大红鹰葡京会Nginx 解决WebApi跨域二破呼吁和Vue单页面问题。Nginx 解决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

季、参考文献

  • 跨域资源共享 CORS
    详解

季、参考文献

  • 跨域资源共享 CORS
    详解

相关文章

admin

网站地图xml地图