精华内容
下载资源
问答
  • 本地这里有两个端口: ...在nginx配置 listen 8888; server_name 127.0.0.1; location / { root html; proxy_pass http://127.0.0.1:8080; # try_files $uri $uri/ /index.php$is_args$args;

    在这里插入图片描述

    本地这里有两个端口:
    8080:前端页面
    80:后端接口

    在nginx配置

    		listen       8888;
            server_name  127.0.0.1;
            location / {
                root   html;
                proxy_pass   http://127.0.0.1:8080;
                # try_files $uri $uri/ /index.php$is_args$args;
                index  index.html index.htm;
            }
    
            location ~ /apis/ { #添加访问目录为/apis的代理配置
                rewrite  ^/apis/(.*)$ /$1 break;
                proxy_pass   http://127.0.0.1:80;
            }
    

    rewrite ^/apis/(.*)$ /$1 break;这句绝对不能少。

    原本的接口为http://127.0.0.1:80
    改为http://127.0.0.1:8888/apis即可
    这样就不会跨域了
    在这里插入图片描述

    展开全文
  • Nginx实现前端访问后端本地接口

    千次阅读 2018-10-10 14:09:00
    Nginx配置两个地方就行: 先是配置好自己项目的服务,确保自己的项目能运行: location / { root /web/xiangmu/public; // 本地项目的路径 index index.html index.php; } 再是配置接口请求后端: location /...

    Nginx配置两个地方就行:
    先是配置好自己项目的服务,确保自己的项目能运行:

            location / {
                root    /web/xiangmu/public;  // 本地项目的路径
                index index.html index.php;
            }
    

    再是配置接口请求后端:

         location /api/ {
                proxy_pass http:// 192.168.1.1;(后端接口地址,端口号也要注意哦,不是80的记得加上端口号)
                proxy_set_header: Host $host;
            }
    

    注意点(后端接口配置):

      ####    如果你的配置出现404了,这个时候你可以对照检查下面的问题是不是你遇到的。
     1、proxy_pass  地址后面要不要加/取决于匹配的 /api/ 作不作为你uri的一部分,如果 /api/ 是其中一部分,则不需要带上 / ; 反之带上。加了 / 相当于是绝对根路径,nginx 不会把location 中匹配的路径 /api/ 带上。
           如果你的配置跟上面一样,同时请求a.html页面:
           请求地址应该要是这样的: http:// 192.168.1.1/api/a.html;
           如果配置是这样:proxy_pass http:// 192.168.1.1/;(后端接口地址),请求接口地址应该是这样: http:// 192.168.1.1/a.html。
    
     2、proxy_pass的地址记得在hosts文件做ip映射,建议直接使用域名对应的ip地址。
    
     3、location 中 ~ (区分大小写)与 ~* (不区分大小写)标识均为正则匹配。如果你不确定,请在location后面加上 location ~* /api/ { }这样的配置 不区分 api三个字母的大小写。

    转载于:https://www.cnblogs.com/xinxinmifan/p/nginx-setting.html

    展开全文
  • (1)配置nginx.conf文件如下:nginx监听9001端口并进行访问路径的正则匹配(~波浪号表示正则匹配),serviceedu接口在8001端口上,eduoss在8002端口上。 (2)前端在conf文件夹下修改dev.env.js文件中的BASE_API改...

    背景:
    1、SpringBoot+Vue(Vue-cli2)前后端分离;
    2、前后端都在本地,只是端口不同,后端每个模块的端口也不同;
    3、前后端都没有开发完,不能对前端进行打包成静态资源。

    为解决前后端分离中的跨域问题做如下配置。
    (1)配置nginx.conf文件如下:nginx监听9001端口并进行访问路径的正则匹配(~波浪号表示正则匹配),serviceedu接口在8001端口上,eduoss在8002端口上。
    nginx中的加入的配置,其余配置不变
    (2)前端在conf文件夹下修改dev.env.js文件中的BASE_API改为“http://localhost:9001“,使前端直接访问nginx。前端配置如下:
    该Vue项目是基于Vue-cli2创建的,修改conf/dev.env.js文件中的BASE_API
    修改完前端配置需要重启前端项目。当重启前端项目,在浏览器中报跨域访问,这里的跨域访问是前端跨域访问nginx。报错如下:
    在这里插入图片描述
    解决:
    也不能说是解决,因为配置流程就是这样,并没有错,
    说一下失败的原因,注意以下几点:
    1、后端接口一定要和nginx.conf中配置的接口相对应,比如nginx.conf中有/serviceedu/这个请求的代理,那后端被代理的接口也一定要在/sreviceedu/对应的路径中。也就是后端被代理接口的路径一定要和nginx中配置的路径相对应,nginx拦截到的路径在后端一定要找到对应的接口。博主这里就是没有做到对应,直接报了跨域访问。(我觉得nginx直接报找不到对应路径更合理,这里还报个跨域访问太迷惑了……)
    2、即使有nginx做为代理,仍然需要在后端加上@CrossOrgin注解,因为nginx访问到后端也是跨域访问。亲测,访问去掉该注解的接口也会报跨域访问

    当后端只是用了一个端口对前端提供服务的时候只使用@CrossOrgin也可以解决跨域问题,注意这里是指当后端只有这一个端口提供服务可以只使用该注解得到解决。

    当后端有多个端口(或多台服务器)时,只是用@CrossOrgin注解是不行的,因为Vue框架中的conf里为了封装请求将BASE_API写死了,也就是只能访问一个端口(或一台服务器),而调用后端需要访问多个端口(多台服务器),这时候不用nginx就意味着每次调用后端接口都要修改BASE_API,显然,不能这么做。

    后话:
    这里整个项目都没有开发完,只是暂时使用nginx解决前后端的跨域访问,博主看过有些nginx解决前后端分离是在前后端都开发完了将前端打包生成静态资源,直接在nginx中配置这些静态资源的访问,而访问这些静态资源只是通过访问nginx直接从本地返回资源,根本没有进行请求,这时前后端都在一个端口下,根本不存在跨域访问,这样做还可以做到动静分离,减少页面请求,提高访问效率。

    展开全文
  • 如图 我nginx配置前端获取后端的接口地址 该怎么写 地址该改成什么样的
  • Nginx配置教程nginx的特点nginx配置前端静态页面代码nginx配置后端接口 nginx的特点 更快: 单次请求会得到更快的响应。 在高并发环境下,Nginx 比其他 WEB 服务器有更快的响应。 高扩展性: Nginx 是基于模块...

    nginx的特点

    • 更快:
      • 单次请求会得到更快的响应。
      • 在高并发环境下,Nginx 比其他 WEB 服务器有更快的响应。
    • 高扩展性:
      • Nginx 是基于模块化设计,由多个耦合度极低的模块组成,因此具有很高的扩展性。许多高流量的网站都倾向于开发符合自己业务特性的定制模块。
    • 高可靠性:
      • Nginx 的可靠性来自于其核心框架代码的优秀设计,模块设计的简单性。另外,官方提供的常用模块都非常稳定,每个 worker 进程相对独立,master 进程在一个 worker 进程出错时可以快速拉起新的 worker 子进程提供服务。
    • 低内存消耗:
      • 一般情况下,10000个非活跃的 HTTP Keep-Alive 连接在 Nginx 中仅消耗 2.5MB 的内存,这是 Nginx 支持高并发连接的基础。
      • 单机支持10万以上的并发连接:理论上,Nginx 支持的并发连接上限取决于内存,10万远未封顶。
    • 热部署:
      • master 进程与 worker 进程的分离设计,使得 Nginx 能够提供热部署功能,即在 7x24 小时不间断服务的前提下,升级 Nginx 的可执行文件。当然,它也支持不停止服务就更新配置项,更换日志文件等功能。
    • 最自由的 BSD 许可协议:
      • 这是 Nginx 可以快速发展的强大动力。BSD 许可协议不只是允许用户免费使用 Nginx ,它还允许 用户在自己的项目中直接使用或修改 Nginx 源码,然后发布。

    nginx配置前端静态页面代码

    • nginx的html目录中创建一个自己命名的文件夹,我在html文件夹下创建了screen和report文件夹。
    • 直接看配置文件内容:
    • 输入 http://192.168.18.131/即可直接访问screen内容。
     server {
            listen       80; #监听端口
            server_name  localhost; #本机192.168.18.131,也就是localhost
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main; #日志
    
            location / {
                root   html/screen/; #screen是我创建的文件夹,用来放置前端解压后的代码文件
            proxy_connect_timeout 3s;
            proxy_read_timeout 5s;
            proxy_send_timeout 3s;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;#刷新页面的时候需要此配置,不配置刷新页面找不到页面
            }
    }
    
    • 问题来了,如果我要配置多个前端项目,比如PC端,H5,钉钉等
    • 输入 http://192.168.18.131/report/ 访问report文件下的网页内容
    • alias配置如下
    server {
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                root   html/screen/;
            proxy_connect_timeout 3s;
            proxy_read_timeout 5s;
            proxy_send_timeout 3s;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
            }
    
            location /report {
                alias   html/report/;
            proxy_connect_timeout 3s;
            proxy_read_timeout 5s;
            proxy_send_timeout 3s;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
           }
       }
    
    • 使用alias一定要注意的几个点:
      • 目录名后面要加 /,否则找不到文件。
      • alias只能位于location块中。

    nginx配置后端接口

    • 输入 http://192.168.18.131/ding/ yuqihai访问http://web-dingtalk.wuhu.xip.io/yuqihai接口
    server {
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                root   html/screen/;
            proxy_connect_timeout 3s;
            proxy_read_timeout 5s;
            proxy_send_timeout 3s;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
            }
    
            location /report {
                alias   html/report/;
            proxy_connect_timeout 3s;
            proxy_read_timeout 5s;
            proxy_send_timeout 3s;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
           }
            
           location /ding/ {
            proxy_pass http://web-dingtalk.wuhu.xip.io/;#注意这里/和不加/区别很大哟
            proxy_set_header  X-Real-IP  $remote_addr;
            proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
            }
    }
    
    • proxy_pass http://web-dingtalk.wuhu.xip.io 则转发到http://web-dingtalk.wuhu.xip.io/ding/yuqihai
    展开全文
  • nginx解决前端跨域访问

    千次阅读 2019-04-06 20:30:01
    前言:博主最近接触了前后端分离的项目(之前做的都是前后端放一起的),然后在前端调用api接口上碰到了问题,因为浏览器的同源政策,所以前端调用api的时候会被浏览器拦截。 这里所谓的跨域就是指两个页面的协议、域名、...
  • nginx前端配置

    2020-08-02 08:32:27
    有时候为了提测或者更方便前端人员管理内网环境下的前端项目,前端需要自行配置nginx服务器,方便其他人员访问 连接nginx服务器 命令 ssh username@192.168.2.94 或工具IIS7服务器管理 找到路径上传 usr/local/...
  • nginx配置二级域名访问前端项目时,需要在vue.config.js中配置 module.exports = { publicPath: '/login', } publicPath的属性,他的值就是二级域名. 如www.xxxx.com/login 若为配置则会出现访问失败的情况
  • nginx配置vue前端代理

    千次阅读 2020-04-21 16:48:22
    背景:做一个前后端分离的项目,使用vue-cli创建的前端项目,在前端配置跨域请求。 一、开发阶段 在vue.config.js中配置devserver的proxy进行代理请求配置,然后将所有请求改为/api开头的即可。但是这样配置只在开发...
  • 前端后端nginx配置

    千次阅读 2020-05-03 14:59:07
    前端放在nginx那台服务器上,访问其余2台后端接口服务器地址 首先在前端配置的路径为:nginx地址和端口+共同的路由 例如:127.0.0.1:8080/student nginx主要配置项 1、upstream:此处配置的是后端地址 upstream ...
  • 最近连续两个朋友问我跨域相关问题,我猜想可能不少朋友也遇到类似问题,我打算写个博客聊一下我实际使用的配置, ...Nginx的CORS配置,网上太多这配置了,但大家更多的复制粘贴、转发,几乎都是类似下面这...
  • nginx配置跨域访问

    2015-08-11 10:58:00
    前端要在本地测试ajax接口,无法跨域访问,所以在测试环境的nginx配置了跨域支持,方法如下: 在nginx.conf文件, http块下配置 42 #support cross domain access 43 add_header Access-Control-Allow-Origin *; ...
  • 前端调用zuul统一网关服务接口,请求状态码200,但是无返回数据。 浏览器控制台报错信息:No Access-Control-Allow-Origin header is present on requested resource . 2、解决问题 借鉴...
  • 但是当我们需要 原生 html 嵌入 Vue 的时候或者我们不通过 vue.config.js 配置 devServer的时候,我们就需要安装一下本地 Nginx 配置代理了。 下载安装 Nginx 安装之后,启动 Nginx,然后找到 nginx.conf,在我..
  • 配置Nginx前端Apache后端服务器,负载均衡等
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qWLMt9Gq-1588125276496)(https://i.loli.net/2020/04/06/7Q59J62aNeRHihG.png “Nginx实战教程”)] 问题背景 这两天遇到一个这样的需求: ...
  • Nginx前端开发

    2018-10-11 14:28:24
    ... Nginx与Node.js “Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO...作为前端开发,即使没用过Nginx,但一定听说过上面这句话。这句经典的话,基本构成了所有人对Ngi...
  • 需要配置nginx.conf在/usr/local/nginx/conf目录下,与sbin同级,配置文件位置错了,怎么改都没用
  • 攻略背景 最近需要为我哥的协会申请ssl证书,因为小程序接口需要https。于是开启了这一番折腾,最后简化为...可以DNS验证,就是配置域名,那个太麻烦,可以选择验证服务器。只要保证 http://www.你的域名.cn/.well-k...
  • 首先说明一下,我的目标是要通过Docker拉取一个新的Nginx镜像然后启动Nginx,然后映射出来的浏览器的地址...中间Nginx配置踩了好多坑 (1)首先你需要从DockerHub上拉取一个Nginx的官方镜像(这里我没有直接写Docker...
  • nginx配置ssl证书https+域名访问前端页面、https代理/api访问服务器部署springboot的jar包http后台接口 前言:网上很多的文章关于nginx配置https、配置证书的,看了很多都有问题各种bug导致页面出不来,接口请求存在...
  • 我通过命令行打开了一次我使用的一个nginx服务,又手贱点那个nginx.exe点了七八次,搞了四个小时找不到问题。 直到在我怀疑版本问题想删掉nginx的时候,才发现我开启了这同一个服务很多次,我还以为结束不了,然后...
  • 安全 --- ssl证书 选择对应的免费版 https://yq.aliyun.com/articles/637307 2.配置https 我的另一篇文章https://blog.csdn.net/cscscssjsp/article/details/90174954 3.配置后台接口访问 location /weixin { ...
  • 需要配置nginx 配置跨域。 方法如下: 1. 登录 linux 操作系统,在/etc/yum.repos.d/目录下创建一个源配置文件nginx.repo: cd /etc/yum.repos.d/ vim nginx.repo 填写如下内容: [nginx] name=nginx repo ...
  • Nginx部署前端项目

    2021-05-08 22:38:02
    首先当然是检查Nginx: 查看nginx的安装路径:whereis nginx nginx: /usr/local/nginx ..../nginx -s reload 重新加载配置文件 ps aux | grep nginx nginx展示图片: location /images { root /us
  • 配置NGINX前端APACHE后端服务器

    千次阅读 2018-04-29 17:04:52
    nginx处理静态内容是把好手,apache虽然占用内存多了点,性能上稍逊,但一直比较稳健。倒是nginx的FastCGI有时候会出现502 Bad ...当用户访问的是80端口的nginx,然后nginx将静态内容留给自己,其余的转发给非...
  • 上一篇:Nginx——windows安装 上面一篇记录了Nginx的Windows环境安装,本文基于此继续记录: 1、dos命令行输入: start nginx 窗口闪烁一次之后,在浏览器输入127.0.0.1会出现下面的页面: 2、下面打开...
  • nginx配置通过域名访问

    千次阅读 2019-08-06 10:04:39
    nginx配置通过域名访问 转载 https://blog.csdn.net/qq_15724141/article/details/83346093
  • 安装nginx 环境:macos mac环境下是使用的brew安装nginx 1.终端输入 brew search nginx 查找nginx 2.安装指令brew install nginx 安装完成后会在终端中看到一些...3.2 打开nginx配置文件所在目录 open nginx/ ...
  • 这几天一直在搞nginx配置的东西,踩了很多坑,特此记录。 前后端分离的项目有两种部署方案,第一种是把前端打包好的dist文件夹放在后端的static下面,然后打包后端,在服务器运行后端的这个jar包,没什么好说的。 第...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,914
精华内容 10,765
关键字:

nginx配置前端访问接口