Access to XMLHttpRequest at 'http://localhost:8080/admin/login' from origin 'http://localhost:8082' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the
时间: 2023-07-09 18:03:40 浏览: 210
这个错误是因为浏览器的同源策略(Same-Origin Policy)导致的。同源策略是浏览器的一种安全机制,它限制了一个页面从另一个源加载任何资源。如果你的前端应用在访问一个不同域名的后端接口时,浏览器会阻止这个请求,以保护用户的安全。
解决这个问题有几种方法:
1. 在后端添加CORS头部:在后端返回的响应中添加Access-Control-Allow-Origin头部,允许特定的域名访问这个接口。例如,如果你想允许localhost:8082访问http://localhost:8080/admin/login,可以在后端的响应中添加以下头部:
```
Access-Control-Allow-Origin: http://localhost:8082
```
2. 使用代理:在前端应用中,你可以创建一个代理来转发请求到后端接口。这样,所有的请求都会发送到同一个域名,从而避免了跨域问题。例如,你可以在前端应用的package.json文件中添加以下配置:
```
"proxy": "http://localhost:8080"
```
然后,在前端应用中,你就可以使用相对路径来发送请求,如:
```
axios.post('/admin/login', data)
```
3. 在开发环境中禁用浏览器的同源策略:如果你只是在开发环境中遇到这个问题,你可以在启动浏览器时添加参数来禁用同源策略。例如,在Chrome浏览器中,你可以使用以下命令启动浏览器:
```
chrome.exe --disable-web-security --user-data-dir
```
这样,浏览器就会禁用同源策略,允许你在本地开发环境中发送跨域请求。注意,这种方法只适用于开发环境,不要在生产环境中使用。
阅读全文