已被CORS策略阻止:请求的资源上不存在“Access Control Allow Origin”标头。
时间: 2023-12-16 17:04:14 浏览: 215
这是因为浏览器实施了跨域资源共享策略(CORS),限制了从一个源站点向另一个源站点发起的跨域请求。如果你想要从一个源站点向另一个源站点发起跨域请求,需要在目标站点的响应头中添加 "Access-Control-Allow-Origin" 标头来允许跨域请求。如果你是目标站点的开发者,可以在响应头中添加以下代码:
```
Access-Control-Allow-Origin: *
```
这将允许来自任意源站点的跨域请求。如果你不是目标站点的开发者,那么你只能向目标站点的开发者请求添加相应的响应头来解决此问题。
相关问题
vue 已被CORS策略阻止:请求的资源上不存在“Access Control Allow Origin”标头。
在 Vue 中,通常会使用 Axios 或者 Fetch 发起 HTTP 请求。如果你遇到了 CORS 跨域问题,可以在请求中添加 `withCredentials: true` 选项来解决该问题。
例如,使用 Axios 发起带有 `withCredentials: true` 选项的 GET 请求:
```javascript
axios.get('https://example.com/api/data', {
withCredentials: true
})
```
同时,在服务端也需要设置 `Access-Control-Allow-Origin` 标头为允许跨域的域名,可以设置为 `*` 表示允许来自任意域名的跨域请求。
如果你在开发环境中使用的是 Vue CLI 提供的 devServer,可以在 `vue.config.js` 文件中添加以下配置来解决跨域问题:
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://example.com',
changeOrigin: true,
withCredentials: true
}
}
}
}
```
这样,当你在客户端发起 `/api` 开头的请求时,Vue CLI 会自动将请求代理到 `https://example.com`,并在请求中添加 `withCredentials: true` 选项。同时,服务端需要设置 `Access-Control-Allow-Origin: *` 标头来允许跨域请求。
访问位于“”的XMLHttpRequesthttp://localhost:8081/login?name=1&password=1'来自原点'http://localhost:8080'已被CORS策略阻止:请求的资源上不存在“Access Control Allow Origin”标头。
这是因为浏览器的同源策略(Same-Origin Policy)限制了在一个源(协议、域名、端口号)下的 JavaScript 脚本只能访问同源下的资源,而不能访问其他源下的资源。这是一种安全限制,防止恶意脚本窃取用户的数据。
为了解决这个问题,可以在服务器端设置 Access-Control-Allow-Origin 头,允许指定的源访问该资源。例如,在响应头中加上以下内容:
Access-Control-Allow-Origin: http://localhost:8080
这样就允许来自 http://localhost:8080 的请求访问该资源了。如果需要允许多个源访问,可以使用逗号分隔,例如:
Access-Control-Allow-Origin: http://localhost:8080, http://localhost:8081
当然,这只是解决跨域访问的一种方式,还有其他更复杂的方法,比如 JSONP、CORS 等。
阅读全文