带你认识跨域

什么情况下会导致跨域？

跨域是什么？
跨域是指你违反了同源策略。

import { fileURLToPath, URL } from 'node:url'


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // resolve: {
  //   alias: {
  //     '@': fileURLToPath(new URL('./src', import.meta.url))
  //   }
  // },
  //服务
  server: {
    // 默认打开的端口和本地
    // host: '0.0.0.0',
    port: 3000,
    // https: false, // 不支持https
    proxy: {
      '/api': {
        target: 'http://1.116.64.64:5004/api2/',	// 实际请求地址
        changeOrigin: true, // 是否跨域
        rewrite: (path) => path.replace(/^\/api/, '') // 对什么类的服务器匹配
      },
    }
  }
})

同源策略是什么？
同源策略是浏览器厂商提出的web安全策略，是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

什么行为会违反同源策略？
向和自己(当前页面的服务器地址) 不同域(不同源) 的服务器发送请求 (http/https:协议名 www.baidu.com/127.0.0.1:域名 8080/7777/8888:端口号) 只要有一个不同就违反了同源策略

代理服务器为什么可以解决跨域？
服务器没有同源策略，所以服务器不存在跨域问题。

代理服务器是怎么代理的？
我们在配置文件中配置一个代理信息，我们发送相对请求时(/xxx/xxx 这种请求浏览器会在前面默认加上当前页面所属服务器，把请求地址拼接为一个完整的请求)服务器先在自己身上寻找对应资源，找不到时服务器就会判断当前请求地址和我们配置的代理信息是否符合，符合的话就去帮我们发送请求，请求到之后就做出响应，请求不到就返回错误信息(404)，这样就实现了服务器代理

---

总结

跨域，指的是浏览器不能执行其他网站的脚本。 它是由浏览器的同源策略造成的，是浏览器 施加的安全限制。 同源策略：所谓同源是指：协议，域名，端口均相同。 即便两个不同的 域名指向同一个ip地址，也非同源。