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天前
|
应用服务中间件 API nginx
nginx配置反向代理404问题
【10月更文挑战第18天】本文介绍了使用Nginx进行反向代理的配置方法,解决了404错误、跨域问题和302重定向问题。关键配置包括代理路径、请求头设置、跨域头添加以及端口转发设置。通过调整`proxy_set_header`和添加必要的HTTP头,实现了稳定的服务代理和跨域访问。
nginx配置反向代理404问题
|
23天前
|
负载均衡 应用服务中间件 Linux
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件,很全
这篇博客文章详细介绍了Nginx的下载、安装、配置以及使用,包括正向代理、反向代理、负载均衡、动静分离等高级功能,并通过具体实例讲解了如何进行配置。
113 4
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件,很全
|
22天前
|
缓存 前端开发 应用服务中间件
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
94 7
|
28天前
|
JavaScript 应用服务中间件 nginx
nginx部署vue项目
本文介绍了将Vue项目部署到Nginx的步骤,包括构建Vue项目、上传dist文件夹到服务器、安装Nginx、配置Nginx代理静态文件以及重启Nginx,确保了Vue应用可以通过域名或IP地址访问。
73 1
|
30天前
|
应用服务中间件 nginx
nginx反向代理与证书设置
nginx反向代理与证书设置
35 3
|
29天前
|
负载均衡 算法 应用服务中间件
nginx反向代理与负载均衡
nginx反向代理与负载均衡
31 1
|
2月前
|
JavaScript Java 应用服务中间件
|
30天前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
111 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
1月前
|
JavaScript 应用服务中间件 开发工具
vue尚品汇商城项目-day07【53.nginx反向代理配置】
vue尚品汇商城项目-day07【53.nginx反向代理配置】
30 4
|
17天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
90 0