同源策略与跨域的处理

同源策略就是浏览器的一种协议 它就是为了保护浏览器的安全  就是协议、域名、端口一致但凡其中有一个不一样就是产生跨域问题 （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/, ''),
      },
  }
}