vue3 xmlhttprequest
时间: 2023-11-05 20:00:56 浏览: 55
跨域问题是指在浏览器中,当使用XMLHttpRequest或fetch等方式发送请求时,如果请求的目标地址与当前页面的域名、协议或端口不一致,就会触发浏览器的同源策略,从而导致请求被拒绝。
为了解决跨域问题,可以使用Nginx代理或配置vue.config.js来进行处理。以下是两种常见的解决方法:
1. 使用Nginx代理:
首先,在vue.config.js中配置proxy项,将需要跨域的接口路径映射到目标服务器上。例如,假设需要将接口地址'/admin'代理到'http://192.168.1.21:8096',配置如下:
```
module.exports = {
devServer: {
proxy: {
'/admin': {
target: 'http://192.168.1.21:8096',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/admin': ''
}
}
}
}
}
```
这样,当请求接口地址以'/admin'开头时,Nginx会将请求代理到目标服务器上,从而解决跨域问题。
2. 配置vue.config.js:
在vue.config.js中添加devServer项,设置proxy属性来进行跨域配置。例如,假设需要将接口地址'/admin'代理到'http://192.168.1.21:8096',配置如下:
```
module.exports = {
devServer: {
proxy: {
'/admin': {
target: 'http://192.168.1.21:8096',
changeOrigin: true,
pathRewrite: {
'^/admin': ''
}
}
}
}
}
```
这样,当请求接口地址以'/admin'开头时,vue-cli会将请求代理到目标服务器上,从而实现跨域访问。
以上是两种常见的解决跨域问题的方法,请根据自己的需求选择适合的方式进行配置。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)