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.最坑的就是格式错误了 空格啦 换行啦啥的都会跨域失败


目录
相关文章
|
24天前
|
缓存 负载均衡 算法
如何配置Nginx反向代理以实现负载均衡?
如何配置Nginx反向代理以实现负载均衡?
|
29天前
|
存储 负载均衡 中间件
Nginx反向代理配置详解,图文全面总结,建议收藏
Nginx 是大型架构必备中间件,也是大厂喜欢考察的内容,必知必会。本篇全面详解 Nginx 反向代理及配置,建议收藏。
Nginx反向代理配置详解,图文全面总结,建议收藏
|
1月前
|
应用服务中间件 API nginx
nginx配置反向代理404问题
【10月更文挑战第18天】本文介绍了使用Nginx进行反向代理的配置方法,解决了404错误、跨域问题和302重定向问题。关键配置包括代理路径、请求头设置、跨域头添加以及端口转发设置。通过调整`proxy_set_header`和添加必要的HTTP头,实现了稳定的服务代理和跨域访问。
226 1
nginx配置反向代理404问题
|
24天前
|
负载均衡 监控 应用服务中间件
配置Nginx反向代理时如何指定后端服务器的权重?
配置Nginx反向代理时如何指定后端服务器的权重?
40 4
|
24天前
|
安全 应用服务中间件 网络安全
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
47 3
|
24天前
|
安全 应用服务中间件 网络安全
配置Nginx反向代理实现SSL加密访问的步骤是什么?
我们可以成功地配置 Nginx 反向代理实现 SSL 加密访问,为用户提供更安全、可靠的网络服务。同时,在实际应用中,还需要根据具体情况进行进一步的优化和调整,以满足不同的需求。SSL 加密是网络安全的重要保障,合理配置和维护是确保系统安全稳定运行的关键。
84 3
|
24天前
|
缓存 负载均衡 安全
Nginx的反向代理具体是如何实现的?
Nginx的反向代理具体是如何实现的?
|
2月前
|
负载均衡 应用服务中间件 Linux
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件,很全
这篇博客文章详细介绍了Nginx的下载、安装、配置以及使用,包括正向代理、反向代理、负载均衡、动静分离等高级功能,并通过具体实例讲解了如何进行配置。
177 4
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件,很全
|
2月前
|
缓存 前端开发 应用服务中间件
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
219 7
|
2月前
|
JavaScript 应用服务中间件 nginx
nginx部署vue项目
本文介绍了将Vue项目部署到Nginx的步骤,包括构建Vue项目、上传dist文件夹到服务器、安装Nginx、配置Nginx代理静态文件以及重启Nginx,确保了Vue应用可以通过域名或IP地址访问。
137 1