解决前端跨域:has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header...
时间: 2023-11-17 19:02:38 浏览: 49
前端跨域问题是指在浏览器中,当一个Web应用程序(Web page、Web API等)向另一个源(domain、protocol、port)发起请求时,浏览器会根据同源策略(Same-Origin Policy)限制该请求。如果请求的目标与当前页面的源不同,则浏览器会阻止该请求,抛出“has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.”的错误信息。解决这个问题的方法有以下几种:
1. 服务器端设置响应头Access-Control-Allow-Origin,允许指定的源访问资源。例如,设置Access-Control-Allow-Origin: *,表示允许所有源访问资源。
```javascript
// 服务器端设置响应头
response.setHeader('Access-Control-Allow-Origin', '*');
```
2. 服务器端设置响应头Access-Control-Allow-Credentials,允许客户端发送包含凭据的请求。例如,设置Access-Control-Allow-Credentials: true,表示允许客户端发送包含凭据的请求。
```javascript
// 服务器端设置响应头
response.setHeader('Access-Control-Allow-Credentials', true);
```
3. 服务器端设置响应头Access-Control-Allow-Methods,允许客户端使用的HTTP方法。例如,设置Access-Control-Allow-Methods: GET, POST,表示允许客户端使用GET和POST方法。
```javascript
// 服务器端设置响应头
response.setHeader('Access-Control-Allow-Methods', 'GET, POST');
```
4. 服务器端设置响应头Access-Control-Allow-Headers,允许客户端发送的请求头。例如,设置Access-Control-Allow-Headers: Content-Type,表示允许客户端发送Content-Type请求头。
```javascript
// 服务器端设置响应头
response.setHeader('Access-Control-Allow-Headers', 'Content-Type');
```