Nginx代理axios请求以及注意事项详解

 更新时间:2019-08-11 12:01:45   作者:佚名   我要评论(0)

前言
近期写个小demo,因为用到某大厂的在线数据,接口做了跨域限制,所以利用Nginx代理来解决这些问题。


1. nginx.conf 配置信息


由于nginx.conf配置信

前言

近期写个小demo,因为用到某大厂的在线数据,接口做了跨域限制,所以利用Nginx代理来解决这些问题。

1. nginx.conf 配置信息

由于nginx.conf配置信息较多,本篇只关注跟axios和静态资源请求设置,顺便也将常见的一些配置项备注一下。具体设置如下:

# 设定http服务器,利用它的反向代理功能提供负载均衡支持
http {
 #连接超时时间
 keepalive_timeout 120;
 
 #gzip压缩开关及相关配置
 gzip on;
 gzip_min_length 1k;
 gzip_buffers  4 32k;
 gzip_http_version 1.1;
 gzip_comp_level 2;
 gzip_types  text/plain application/x-javascript text/css application/xml;
 gzip_vary on;
 gzip_disable "MSIE [1-6].";

 #设定实际的服务器列表 
 upstream zp_server{
 server 127.0.0.1:8089;
 }
 
 #HTTP服务器 
 server {
 #监听80端口
 listen 80
 
 #定义服务名称
 server_name localthost;
 
 #首页
 index index.html
 
 #指向项目根目录
 root D:\project\src\main\webapp;
 
 #编码格式
 charset utf-8;
 
 #代理的路径(和upstream绑定),location 后面设置映射的路径
 location / {
  #代理配置参数
  proxy_connect_timeout 180;
  proxy_send_timeout 180;
  proxy_read_timeout 180;
  proxy_set_header Host $host;
  proxy_set_header X-Forwarder-For $remote_addr;
  proxy_pass http://zp_server/;
  
  #跨域相关设置
  add_header 'Access-Control-Allow-Origin' '*' always;
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;
  }
  
  #配置静态资源 解决js css文件无法加载无法访问的问题,注意末尾不能有 /
  location ~ .*\.(js|css|jpg|png)$ {
  proxy_pass http://zp_server;
  } 
 }
}

2. proxy_pass的斜杠问题

Nginx的官网将proxy_pass分为两种类型:

  • 一种是只包含IP和端口号的(连端口之后的/也没有,这里要特别注意),比如proxy_pass http://localhost:8080,这种方式称为不带URI方式;
  • 另一种是在端口号之后有其他路径的,包含了只有单个/的,如proxy_pass http://localhost:8080/,以及其他路径,比如proxy_pass http://localhost:8080/abc。

2.1 对于不带URI方式

对于不带URI方式,Nginx将会保留location中路径部分,比如:

location /api1/ {
 proxy_pass http://localhost:8080;
}

在访问http://localhost/api1/xxx时,会代理到http://localhost:8080/api1/xxx

2.2 对于带URI方式

对于带URI方式,nginx将使用诸如alias的替换方式对URL进行替换,并且这种替换只是字面上的替换,比如:

location /api2/ {
 proxy_pass http://localhost:8080/;
}

当访问http://localhost/api2/xxx时,http://localhost/api2/(注意最后的/)被替换成了http://localhost:8080/,然后再加上剩下的xxx,于是变成了http://localhost:8080/xxx。

2.3 总结一下

server {
 listen    80;
 server_name localhost;

 location /api1/ {
  proxy_pass http://localhost:8080;
 }
 # http://localhost/api1/xxx -> http://localhost:8080/api1/xxx


 location /api2/ {
  proxy_pass http://localhost:8080/;
 }
 # http://localhost/api2/xxx -> http://localhost:8080/xxx


 location /api3 {
  proxy_pass http://localhost:8080;
 }
 # http://localhost/api3/xxx -> http://localhost:8080/api3/xxx


 location /api4 {
  proxy_pass http://localhost:8080/;
 }
 # http://localhost/api4/xxx -> http://localhost:8080//xxx,请注意这里的双斜线,好好分析一下。


 location /api5/ {
  proxy_pass http://localhost:8080/haha;
 }
 # http://localhost/api5/xxx -> http://localhost:8080/hahaxxx,请注意这里的haha和xxx之间没有斜杠,分析一下原因。

 location /api6/ {
  proxy_pass http://localhost:8080/haha/;
 }
 # http://localhost/api6/xxx -> http://localhost:8080/haha/xxx

 location /api7 {
  proxy_pass http://localhost:8080/haha;
 }
 # http://localhost/api7/xxx -> http://localhost:8080/haha/xxx

 location /api8 {
  proxy_pass http://localhost:8080/haha/;
 }
 # http://localhost/api8/xxx -> http://localhost:8080/haha//xxx,请注意这里的双斜杠。
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

  • Vue.js实战之使用Vuex + axios发送请求详解
  • vue中axios处理http发送请求的示例(Post和get)
  • VUE axios发送跨域请求需要注意的问题
  • vue axios同步请求解决方案
  • vue axios请求超时的正确处理方法
  • 详解Vue用axios发送post请求自动set cookie
  • vue使用Axios做ajax请求详解
  • vue-cli axios请求方式及跨域处理问题
  • 解决axios发送post请求返回400状态码的问题
  • 完美解决axios跨域请求出错的问题

相关文章

  • Nginx代理axios请求以及注意事项详解

    Nginx代理axios请求以及注意事项详解

    前言 近期写个小demo,因为用到某大厂的在线数据,接口做了跨域限制,所以利用Nginx代理来解决这些问题。 1. nginx.conf 配置信息 由于nginx.conf配置信
    2019-08-11
  • 简单谈谈MySQL数据透视表

    简单谈谈MySQL数据透视表

    我有一张这样的产品零件表: 部分 part_id part_type product_id -------------------------------------- 1 A 1 2 B 1 3
    2019-08-11
  • Linux curl表单登录或提交与cookie使用详解

    Linux curl表单登录或提交与cookie使用详解

    前言 本文主要讲解通过curl 实现表单提交登录。单独的表单提交与表单登录都差不多,因此就不单独说了。 说明:针对curl表单提交实现登录,不是所有网站都适用
    2019-08-11
  • kotlin实现通知栏提醒功能示例代码

    kotlin实现通知栏提醒功能示例代码

    一、概述 2019年英雄联盟LPL赛区赛季赛打得火热,作为一个RNG粉丝,想通过app实现RNG赛程提醒,于是就有了这次技术实践。我在网上找了很久,几乎没找到使用ko
    2019-08-11
  • MySQL中“:=”和“=”的区别浅析

    MySQL中“:=”和“=”的区别浅析

    = 只有在set和update时才是和:=一样,赋值的作用,其它都是等于的作用。鉴于此,用变量实现行号时,必须用:=。 := 不只在set和update时时赋值的作用,在selec
    2019-08-08
  • 图文介绍mysql中:=和=的区别

    图文介绍mysql中:=和=的区别

    :=和=的区别 = 只有在set和update时才是和:=一样,赋值的作用,其它都是等于的作用。鉴于此,用变量实现行号时,必须用:= := 不只在set和u
    2019-08-08
  • Flutter利用注解生成可自定义的路由的实现

    Flutter利用注解生成可自定义的路由的实现

    route_generator是什么 这是一个简单的 Flutter 路由生成库,只需要少量的代码,然后利用注解配合源代码生成,自动生成路由表,省去手工管理路由代码的烦恼
    2019-08-08
  • Python学习笔记之迭代器和生成器用法实例详解

    Python学习笔记之迭代器和生成器用法实例详解

    本文实例讲述了Python学习笔记之迭代器和生成器用法。分享给大家供大家参考,具体如下: 迭代器和生成器 迭代器 每次可以返回一个对象元素的对象,例如返回
    2019-08-08
  • 详解解决Python memory error的问题(四种解决方案)

    详解解决Python memory error的问题(四种解决方案)

    昨天在用用Pycharm读取一个200+M的CSV的过程中,竟然出现了Memory Error!简直让我怀疑自己买了个假电脑,毕竟是8G内存i7处理器,一度怀疑自己装了假的内存条
    2019-08-08
  • Python判断字符串是否xx开始或结尾的示例

    Python判断字符串是否xx开始或结尾的示例

    判断是否xx开始 使用startswith 示例代码: String = "12345 上山打老虎" if str(String).startswith('1'): #判断String是否以“虎”结尾 print("有老虎
    2019-08-08

最新评论