has been blocked by (ORs policy: Mo "Access-(ontrol-Allow-0rigin' header is present on the requested resource.如何在前端设置
时间: 2023-11-20 15:56:27 浏览: 49
出现这个错误是因为浏览器的同源策略,即只允许与同一域名下的资源进行交互。如果需要与其他域名下的资源进行交互,就需要在服务端设置响应头信息,允许跨域访问。在前端可以通过以下几种方式来解决这个问题:
1. JSONP:利用script标签没有跨域限制的漏洞,通过动态创建script标签,向服务器请求数据,服务器返回一段调用某个函数的js代码,前端通过该函数来处理数据。但是JSONP只支持GET请求,且只能用于请求JSON格式的数据。
2. CORS:服务端设置响应头信息,允许跨域访问。在响应头中添加Access-Control-Allow-Origin字段,指定允许跨域访问的域名,可以使用通配符*表示允许所有域名访问。同时还可以设置其他的Access-Control-Allow-*字段,如Access-Control-Allow-Methods、Access-Control-Allow-Headers等。
3. 代理:在同一域名下设置代理服务器,将前端请求转发到目标服务器,再将目标服务器返回的数据返回给前端。这种方式需要在服务端进行配置,前端只需要将请求发送到代理服务器即可。
下面是一个使用CORS解决跨域问题的例子:
```javascript
// 前端代码
fetch('http://example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
// 服务端代码(Node.js)
const http = require('http')
http.createServer((req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*')
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
if (req.method === 'OPTIONS') {
res.writeHead(200)
res.end()
return
}
if (req.url === '/data') {
res.writeHead(200, { 'Content-Type': 'application/json' })
res.end(JSON.stringify({ message: 'Hello, world!' }))
} else {
res.writeHead(404)
res.end()
}
}).listen(8080)
```