前端面试小结

WEB前端初学者680002025-07-28 10:19

一.前端解决跨域问题的方法有哪些？

1.CORS(跨域资源共享)

原理： 服务端设置HTTP响应头（如Access-Control-Allow-Origin）声明允许跨越的源

http 复制代码 
Access-Control-Allow-Origin: *       // 允许所有域名（不安全）
Access-Control-Allow-Origin: https://your-domain.com // 允许指定域名
Access-Control-Allow-Methods: GET, POST, PUT        // 允许的请求方法
Access-Control-Allow-Headers: Content-Type, Authorization  // 允许的自定义头

适用场景： 最主流、安全的跨域方案，支持所有的HTTP方法

2代理服务器（Proxy）

原理： 前端请求同源服务器，由改服务器转发请求到目标服务器（避开浏览器同源策略）

实现方式：

webpack DevServer配置代理

js 复制代码 
devServer: {
  proxy: {
    '/api': {
      target: 'http://target-server.com',
      changeOrigin: true,
      pathRewrite: { '^/api': '' }
    }
  }
}

vite配置

js 复制代码 
server: {
  proxy: {
    '/api': {
      target: 'http://target-server.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

适用场景： 开发环境

3.JSONP

原理： 利用script标签不受同源策略限制的特性，通过回调函数接收数据 实现：

js