vue 部署到nginx 跨域携带cookie配置

该配置文件是一个基本的Nginx服务器配置示例,用于监听80端口并设置了一个Vue项目的反向代理到8080端口。location/api/部分将请求转发到后端服务,而location/则处理Vue项目的静态文件,确保路由正确工作。此外,还包含了错误页面的设置。

# Default server configuration
#
server {
        listen 80;
        autoindex on;

        #自己设置端口号
        server_name  127.0.0.1;        #自己设置ip地址


         #location @router {
        #       rewrite ^.*$ /index.html last;            #解决重新刷新页面,页面空白的问题
       #        }

         location /api/ {
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Scheme $scheme;
            proxy_set_header X-Forwarded-Scheme $scheme;
            proxy_set_header X-Forwarded-Proto $scheme;

            proxy_cookie_path / /api/;
             proxy_pass http://127.0.0.1:8080/;    #8080是后端端口
          }


          location / {
           root   /usr/share/nginx/dist;        #这里写vue项目的所在地址
           index  index.html;               #这里是vue项目的首页,需要保证dist中有index.html文件
           try_files $uri $uri/ /index.html;

          }

         error_page   500 502 503 504  /50x.html;        #错误页面

}
 

### Vue 项目部署配置失效的解决方案 #### 使用 Nginx 反向代理 对于生产环境下的问题,推荐使用Nginx作为反向代理服务器。这不仅解决了问题,还提高了应用的安全性和性能。 在Nginx配置文件中添加如下内容: ```nginx server { listen 80; server_name yourdomain.com; location /api/ { proxy_pass http://localhost:8088/server/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } ``` 这种方式能够有效地将前端发出的所有`/api`开头的请求转发给指定的服务地址[^2]。 #### 设置 CORS 头部信息 另一种方法是在后端服务中设置CORS头部信息。这种方法适用于前后端分离的应用场景,在后端代码里加入相应的中间件或过滤器来处理请求。 例如,在Java Spring Boot框架下可以通过以下方式开启全局CORS支持: ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") // 允许来自任何源的请求 .allowCredentials(true); // 支持带凭证(如Cookie)的请求 } } ``` 而在Node.js Express环境中,则可以安装并使用`cors`模块: ```javascript const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors({ origin: '*', credentials: true, })); // Your routes here... app.listen(port, () => console.log(`Server running on port ${port}`)); ``` 通过上述任一途径都可以实现在不同编程语言环境下对CORS的支持[^5]。 #### Apache Server 的 `.htaccess` 文件调整 如果使用的Web服务器是Apache而非Nginx,那么可以在项目的根目录创建或编辑`.htaccess`文件以启用URL重写功能,并尝试解决可能存在的404错误以及问题。不过需要注意的是,具体的语法可能会因版本差异而有所不同,建议参照官方文档进行适当修改[^3]。 ```apacheconf <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] Header set Access-Control-Allow-Origin "*" </IfModule> ``` 这段配置首先确保了HTML5 History模式下的路由正常工作,其次设置了允许所有来源访问资源的CORS策略。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

人生万事须自为,跬步江山即寥廓。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值