互联网面试宝典

您现在的位置是: 首页 > Nginx

问题详情

如何用 Nginx 解决前端跨域问题?

面试宝典 2023-06-12 Web前端开发工程师 57
前端跨域问题是因为浏览器的同源策略所导致的。Nginx 可以通过反向代理实现跨域请求。具体步骤如下:

1. 配置 Nginx,在你的服务器上找到 Nginx 的配置文件 nginx.conf,在 http 部分添加以下代码:

```
http {
# ...
# 其他配置
# ...

# 解决跨域问题
location /api/ {
add_header 'Access-Control-Allow-Origin' '*'; # 设置允许跨域的域名,* 表示允许所有域名
add_header 'Access-Control-Allow-Credentials' 'true'; # 允许携带cookie
proxy_pass 'http://example.com/api/'; # 实际请求的地址
}
}
```

2. 在前端代码中,请求的接口地址改为 Nginx 配置的地址,例如:

```
axios.get('http://example.com/api/getUserInfo')
```

通过 Nginx 反向代理请求的地址变成了:

```
axios.get('http://yourdomain.com/api/getUserInfo')
```

从而实现跨域请求。