vue axios 生产环境如何跨域
时间: 2023-02-11 18:37:08 浏览: 216
Vue.js 中使用 axios 进行跨域请求时,可以在创建 axios 实例时配置 `baseURL` 和 `headers` 等属性。例如,在 main.js 中,可以这样创建 axios 实例:
```
import axios from 'axios'
axios.defaults.baseURL = 'http://api.example.com'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
Vue.prototype.$http = axios
```
这样在 Vue 组件中就可以通过 `this.$http` 来发起请求了。
如果是生产环境, 需要在服务端配置代理,如果是使用的 nginx 作为前端服务器,可以在 nginx 的配置文件中添加如下内容:
```
location /api/ {
proxy_pass http://backend.example.com;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
```
这样就可以通过 `http://frontend.example.com/api/` 来访问后端的 `http://backend.example.com/` 了。
如果是使用的 nodejs 作为前端服务器 可以使用 `cors` 中间件, 也可以在 webpack 中设置 devServer.proxy
总之 使用 cors 和 代理(nginx,webpack.devServer) 都能解决跨域问题。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)