nginx部署vue解决跨域
时间: 2023-11-19 11:04:47 浏览: 135
Nginx可以通过反向代理来解决Vue项目的跨域问题。具体步骤如下:
1. 在Nginx配置文件中添加一个location,指向Vue项目的地址。
2. 在该location中添加proxy_pass指令,将请求转发到Vue项目的地址。
3. 在该location中添加proxy_set_header指令,设置请求头信息,包括Host、Referer、User-Agent等。
4. 在Vue项目中,将axios的baseURL设置为Nginx的地址。
下面是一个示例Nginx配置文件:
```
server {
listen 80;
server_name example.com;
location / {
root /var/www/vue-project/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header Referer $http_referer;
proxy_set_header User-Agent $http_user_agent;
}
}
```
在上面的配置文件中,/api是Nginx的location,http://localhost:3000是Vue项目的地址。在Vue项目中,可以将axios的baseURL设置为/api,这样就可以通过Nginx来解决跨域问题了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)