同源策略就是浏览器的一种协议 它就是为了保护浏览器的安全 就是协议、域名、端口一致但凡其中有一个不一样就是产生跨域问题 (Access-Control-Allow-Origin);
跨域的处理
jsop
就是使用html的标签处理跨域因为这些标签不接受同源策略的影响
src标签请求时返回的内容会被处理为图片
link标签请求时返回的内容会被处理为css样式
iframe标签请求时返回的内容会被处理为html文件
script标签请求时返回的内容会被处理为js代码
cors
我们可以在服务器通过cors设置请求头来处理跨域问题
'Access-Control-Allow-Credentials': 'true', // 后端允许发送Cookie
'Access-Control-Allow-Origin': '*', // 允许访问的域(协议+域名+端口)
'Access-Control-Allow-Methods': "POST,GET,DELETE,PUT,OPTIONS" // 允许请求方式用着五种`
设置代理处理跨域
例如在vite中可以设置proxy来处理跨域
在vite.config.js中
server: {
proxy: {
'/api': {
target: '跨域的地址',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
}
}