跨域实例和解决⽅案
跨域实例和解决⽅案
然后以 js 在浏览器中进⾏ fetch 进⾏请求测试, 演⽰各种形式的跨域, 以及对应的解决⽅式, 所有代码都是可运⾏的实例.
服务端代码, 默认没有跨域
const http = require('http');
const rver = ateServer((req, res) => {
res.writeHead(200, {
'x-age': '18',
});
甘蔗渣});
rver.listen(8000, () => console.log(`启动成功 localhost:8000`));
青蛙手工制作客户端代码报错以及对应的设置⽅式
/**
简单请求
await fetch('localhost:8000/api/test').then(res => ())
报错
Access to fetch at 'localhost:8000/api/test' from origin 'localhost:9005' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is prent on the requested resource. If an opaque respon rves your needs, t t 设置响应头
'Access-Control-Allow-Origin': '*'
*/
/**
⾃定义请求头起音
await fetch('localhost:8000/api/test ', {
headers: { 'Content-Type': 'application/json' },
}).then(res => ())
错误
Access to fetch at 'localhost:8000/api/test' from origin 'localhost:9005' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight respon.
设置响应头
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': '*',
*/
/**
⾃定义⽅法
await fetch('localhost:8000/api/test ', {
method: 'PATCH',
}).then(res => ())
错误
Access to fetch at 'localhost:8000/api/test' from origin 'localhost:9005' has been blocked by CORS policy: Method PATCH is not allowed by Access-Control-Allow-Methods in preflight respon.
设置响应头
'Access-Control-Allow-Origin': '*',
北京微信公众号
'Access-Control-Allow-Methods': '*',
*/
/**
携带 cookie
await fetch('localhost:8000/api/test', {
credentials: 'include',
}).then(res => ())
报错
Access to fetch at 'localhost:8000/api/test' from origin 'localhost:9005' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the respon must not be the wildcard '*' when the request's credentia Access to fetch at 'localhost:8000/api/test' from origin 'localhost:9005' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the respon is '' which must be 'true' when the request's creden 设置响应头
'Access-Control-Allow-Origin': 'localhost:9005',
'Access-Control-Allow-Credentials': 'true',
*/大白菜炖粉条
/**
设置⾃定义 header
await fetch('localhost:8000/api/test', {
headers: { 'x-age': '28' },
}).then(res => ())
报错
Access to fetch at 'localhost:8000/api/test' from origin 'localhost:9005' has been blocked by CORS policy: Request header field x-age is not allowed by Access-Control-Allow-Headers in preflight respon.
设置响应头
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': '*',
*/
/**古诗元旦
读取⾃定义 header
await fetch('localhost:8000/api/test').then(res => ('x-age'))
报错
⽆, 但不能读取到 header 中的 x-age
设置响应头, 表明允许获取的⾃定义头
'Access-Control-Allow-Origin': '*',
'Access-Control-Expo-Headers': 'x-age',
*/
/**
综合测试
await fetch('localhost:8000/api/test', {
method: 'PATCH',
credentials: 'include',
headers: { 'x-age': '28' },
body: JSON.stringify({
token: 'test_token',
content: 'test_content'
反光伞
})
}).then(async res => ({text: (), age: ('x-age')}))
*/
逍遥游全文总结
是否可以跨域, 是由服务器端决定的. 通常设置响应头即可, 在响应头中告诉浏览器允许跨域的域名, 以及允许跨域的⽅式, 还有允许读取和设置的请求头, 全都由服务端决定.
⼀般我们有⼏种解决⽅案:
关闭浏览器的安全策略
安装浏览器插件
直接从后端代码上设置为允许
使⽤代理⽅式
其中插件的⽅式和代理的⽅式其他都是在中途拦截并设置 header 为对应的跨域标致.
在前端项⽬的开发环境中, ⼀般可以使⽤ webpack 的 proxy 功能, 或者可以使⽤的 proxy 功能. 推荐 mockm, 因为它不仅可以代理, 并且不需要复杂的配置, 还能获取到请求的接⼝历史和数据.
