同源策略与跨域的处理

原创已于 2024-03-09 10:28:20 修改 · 502 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2024-03-08 20:46:45 首次发布

本文介绍了同源策略的作用，列举了不同HTML标签如何处理跨域请求，重点讲解了CORS机制以及如何在服务器端通过`Access-Control-Allow-Origin`等头部进行设置。同时，提到了在Vite开发环境中的proxy配置来解决跨域问题。

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