vue 生产环境中解决跨域问题

在Vue生产环境中，有两种方式可以解决跨域问题：

1. 后端配置允许跨域

（1）后端配置

后端可以通过设置响应头来允许跨域请求。例如，在Django框架中，可以在视图函数中添加以下代码：

response['Access-Control-Allow-Origin'] = '*'

这样就可以允许所有域名的请求。

（2）Vue项目配置

在Vue项目中，可以通过配置axios和接口路径来解决跨域问题。

（1）axios配置

在main.js中，可以添加以下代码：

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8000' // 设置后端接口地址
Vue.prototype.$axios = axios

这样就可以在组件中使用`this.$axios`来发送请求。

（2）接口路径配置

在发送请求时，可以使用相对路径来代替绝对路径。例如：

this.$axios.get('/api/user')

这样就可以发送到`http://localhost:8000/api/user`的请求。

（3）最终结果

通过以上配置，就可以在Vue生产环境中解决跨域问题。

2. 配置Nginx

另外一种解决跨域问题的方式是通过配置Nginx。具体步骤如下：

（1）nginx配置

在Nginx的配置文件中，添加以下代码：

location /api/ {
    proxy_pass http://localhost:8000/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

这样就可以将以`/api/`开头的请求转发到`http://localhost:8000/`。

（2）最终效果

通过以上配置，就可以在Vue生产环境中解决跨域问题。