跨域

同源策略【仅在浏览器发生，是浏览器的规则】：http交互默认情况下只能在同协议、同域名、同端口的两台终端进行

跨域【仅发生在浏览器】：当A源浏览器的网页向B源的服务器地址(不满足同源策略，满足同源限制)请求对应信息，就会产生跨域，跨域请求在服务端响应后(发送请求的时候是不可能拦截的，因为他不确保请求的服务器地址允不允许跨域)默认情况下会被浏览器拦截，除非对应的请求服务器出具标记说这个A源是允许拿B源的东西的

我们在vite-test中访问一个跨域的地址

fetch("https://baikebcs.cdn.bcebos.com/cms/pc_index/knowledge_topic_menu.json?time=1667485962174")
    .then(res => res.json()).then(res => {
        console.log(res);
    }).catch(err=>{
        console.log(err)
    })

接下来我们通过vite配置proxy实现跨越

export default defineConfig({
  server: {
    proxy: {
      // 选项写法
      '/api': {
        target: 'https://baikebcs.cdn.bcebos.com/cms/pc_index',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

main.js

fetch("/api/knowledge_topic_menu.json?time=1667485962174")
    .then(res => res.json()).then(res => {
        console.log(res);
    }).catch(err=>{
        console.log(err)
    })

该请求会自动拼接域名为http://localhost:5173/api/knowledge_topic_menu.json?time=1667485962174，当该请求发送到本地服务以后，会进行匹配如果满足proxy中的配置就替换请求地址，并向其他服务器拿到数据然后返回。

开发时态：我们一般就利用构建工具或者脚手架或者第三方库的proxy代理配置，或者我们自己搭个开发服务器来解决这个问题

生产时态：我们一般是交给后端去处理跨域的

• ngnix:代理服务本质原理就是和我们]的本地开发vite服务器做跨域是一样
• 配置身份标记：Access-Control-Allow-0rigin可以配置多个或者允许所有，当前域名命中就设置到响应头里

线上环境一般来说把dist目录交给后端或运维后，会把后端服务和前端代码放到一个域下面，就不存在跨域