vue解决 strict-origin-when-cross-origin问题
时间: 2023-07-07 12:43:40 浏览: 307
在 Vue 中,可以通过配置 `vue.config.js` 文件来解决 `strict-origin-when-cross-origin` 问题。具体的做法如下:
1. 在项目根目录下创建 `vue.config.js` 文件。
2. 在该文件中添加如下代码:
```
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
```
上述代码中,我们通过 `devServer.proxy` 配置了一个代理服务器,将 `/api` 开头的请求代理到 `http://localhost:3000`,并将请求头中的 `Origin` 字段设置为目标服务器地址,从而解决了 `strict-origin-when-cross-origin` 问题。
3. 在需要发送请求的组件中,请求地址改为 `/api/xxx` 的形式即可。例如:
```
this.$http.get('/api/users').then(res => {
console.log(res.data)
})
```
上述代码中,我们通过 `$http` 实例发送了一个 GET 请求到 `/api/users`,由于我们在 `vue.config.js` 中配置了代理服务器,因此最终请求的地址为 `http://localhost:3000/users`,并且请求头中的 `Origin` 字段被设置为 `http://localhost:8080`,从而解决了 `strict-origin-when-cross-origin` 问题。
阅读全文