Nginx反向代理解决Vue跨域问题

简介: Nginx反向代理解决Vue跨域问题

1.配置conf目录下的nginx.conf文件里的server

server {
        listen       8080;
        server_name  localhost;
        location / {
            root   html/dist;
            index  index.html index.htm;
        }
         //在下面这里配置反向代理 axios 以及ajax请求一定要是本地的连接,不要请求后台端口,让代理的去请求后台端口,这样才不会跨域(只有请求本地的端口以后,nginx才可以进行反向代理)
     location /api/ {                    //请求连接遇到/api/以后自动将前面的连接转换为下面
                                            //proxy_pass 里面的地址
            proxy_pass   http://127.0.0.1:7001; //这里注意空格的数量
        }
    }

2.详解!!!!!仔细看 这里面有坑


本地地址为                  http://127.0.0.1:8080


后端端口地址为         http://127.0.0.1:7001


1.在挂载的静态文件中的axios以及其他请求都设置请求为本地也就是 http://127.0.0.1:8080这样才可以进行反向代理


2.nginx.conf文件里面按代码里面新增加一个location


请求连接遇到/api/以后自动将前面的连接转换为下面proxy_pass 里面的地址


axios 以及ajax请求一定要是本地的连接,不要请求后台端口,让代理的去请求后台端口,这样才不会跨域(只有请求本地的端口以后,nginx才可以进行反向代理)


3.最坑的就是格式错误了 空格啦 换行啦啥的都会跨域失败


目录
相关文章
|
3天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
167 0
|
3天前
|
负载均衡 应用服务中间件 API
Nginx配置文件详解Nginx负载均衡Nginx静态配置Nginx反向代理
Nginx配置文件详解Nginx负载均衡Nginx静态配置Nginx反向代理
45 4
|
3天前
|
域名解析 弹性计算 应用服务中间件
基于nginx反向代理实现OSS固定域名IP访问
本文基于阿里云OSS手册:https://help.aliyun.com/zh/oss/use-cases/use-an-ecs-instance-that-runs-centos-to-configure-a-reverse-proxy-for-access-to-oss,继续深入讨论如何利用nginx反向代理,实现固定的IP/域名访问OSS bucket。官方文档能够解决大部分的反向代理固定IP访问oss bucket的场景,但是对于必须使用域名作为endpoint的系统,会出现signatrue鉴权问题。本文继续在官方文档的基础上,将反向代理需要域名作为endpoint的场景补齐方案。
|
3天前
|
负载均衡 监控 Unix
[AIGC] Nginx:一个高性能的 Web 服务器和反向代理
[AIGC] Nginx:一个高性能的 Web 服务器和反向代理
|
3天前
|
负载均衡 JavaScript 前端开发
Nginx实现反向代理、负责均衡、动静分离
Nginx实现反向代理、负责均衡、动静分离
|
3天前
|
应用服务中间件 nginx
nginx进行反向代理的配置
在Nginx中设置反向代理的步骤:编辑`/etc/nginx/nginx.conf`,在http段加入配置,创建一个监听80端口、服务器名为example.com的虚拟主机。通过`location /`将请求代理到本地3000端口,并设置代理头。保存配置后,使用`sudo nginx -s reload`重载服务。完成配置,通过example.com访问代理服务器。
31 0
|
3天前
|
应用服务中间件 Nacos nginx
nacos 2.3.2模式 standalone 使用nginx 反向代理之后访问nacos控制台静
nacos 2.3.2模式 standalone 使用nginx 反向代理之后访问nacos控制台静
|
3天前
|
JavaScript 应用服务中间件 nginx
nginx部署vue刷新404
nginx部署vue刷新404
17 0
|
3天前
|
运维 前端开发 应用服务中间件
LNMP详解(七)——Nginx反向代理配置实战
LNMP详解(七)——Nginx反向代理配置实战
24 1
|
3天前
|
负载均衡 应用服务中间件 Linux