进来瞧瞧

在使用 React 进行前端开发时，调用后端接口往往会遇到 跨域问题。这是前端开发中一个非常常见但又容易让初学者困惑的问题。本文将从跨域的基本原理讲起，结合 React 项目的实际开发，讲解如何优雅地解决跨域问题。一、什么是跨域？“跨域”是指浏览器出于安全策略（同源策略 Same-Origin Policy）的限制，阻止一个网页去请求另一个“源”的资源。所谓“源”指的是：协议、域名、端口。只要其中一个不同，就算是跨域。例如：- ✅ http://localhost:3000向 http://localhost:3000请求 —— 同源- ❌ http://localhost:3000向 http://api.example.com请求 —— 跨域- ❌ http://localhost:3000向 https://localhost:3000请求 —— 跨域（协议不同）- ❌ http://localhost:3000向 http://localhost:5000请求 —— 跨域（端口不同）二、React 项目中的跨域场景React 开发环境通常使用 create-react-app脚手架，该脚手架会在 localhost:3000启动一个开发服务器。如果你的 API 接口部署在另一个地址，比如：fetch('http://localhost:5000/api/user')浏览器就会报类似下面的错误：Access to fetch at 'http://localhost:5000/api/user' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.这说明前端请求被浏览器拦截了，产生了跨域错误。三、解决方案：使用本地代理（推荐）在 React 项目中，我们推荐使用 代理转发（proxy）的方式解决跨域问题。1. 配置方法方法一：使用 vite（推荐现代项目）在 vite.config.js中添加：export default {  server: {    proxy: {      '/api': {        target: 'http://localhost:5000',        changeOrigin: true,        rewrite: path => path.replace(/^\/api/, '')      }    }  }}请求写法：fetch('/api/user')  // 实际会代理到 http://localhost:5000/user方法二：使用 create-react-app在项目根目录下创建 setupProxy.js文件（适用于 react-scripts）：npm install http-proxy-middleware --save// src/setupProxy.jsconst { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) {  app.use(    '/api',    createProxyMiddleware({      target: 'http://localhost:5000',      changeOrigin: true,      pathRewrite: {        '^/api': ''      }    })  );};此时你可以在前端发请求如下：fetch('/api/user')代理服务器会将请求自动转发到后端地址 http://localhost:5000/user，浏览器认为是本地访问，从而不会报跨域错误。四、后端支持 CORS（跨域资源共享）如果你无法使用代理（比如项目已部署上线），需要让后端支持 CORS。以 Node.js/Express 为例：npm install corsconst express = require('express');const cors = require('cors');const app = express();app.use(cors());app.get('/user', (req, res) => {  res.json({ name: '张三' });});后端添加 Access-Control-Allow-Origin等响应头后，浏览器就能正常接收响应。五、其他跨域解决方式（了解）

除项目外的提问：介绍一下ES6+在项目中的一些使用：Promise Async Await Map对象，数组方法介绍一下原型链：是JS提供的一套基于原型的继承机制，在继承的过程中如果在某个对象找不到其方法，会沿着原型链往上找方法，如果一直找到null都没有找到的话，就会报错说明not a function。每个对象都有其原型方法，比如Array Function Object等，在原型方法上的方法可以被所有对象所使用，原型链的尽头是null。题目： function A(){    Function.prototype.a = function(){        console.log(&q...

35min项目/八股项目/八股：1.css盒模型2.讲几个元素水平垂直居中的方案   3.css画一个等腰直角三角形    4.怎么理解js的箭头函数和普通函数   5.普通函数的this指向规则6.怎么理解js闭包    7.结合你的实际开发例子说一下js闭包8.讲一下防抖与节流9.防抖与节流的具体实现思路10.js事件循环机制11.前端跨域问题的解决方案12.JSONP有什么缺点13.vue2的computed和watch的区别14.模版里面渲染数组列表时，v-for的key作用15.index作为key有什么问题16.vue2内置的函数$nextTick有什么作用17.​​this.$set 的作用18.​​CommonJS​和ES Modules的区别19.讲一下你在实际开发中遇到的问题并且你是如何解决的没有手撕反问：1.具体业务：做系统    技术栈：vue22.为什么公司用vue2不升级到vue3：历史原因，浏览器兼容3.哪些需要改进的点：不够深，JSONP忘了4.出结果：等2-3天    二面说是多人面试

在繁华都市的一隅，林小宇坐在电脑前，手指在键盘上轻轻敲击，眼神专注而坚定。作为一名资深程序员，他的生活几乎被代码和项目填满，日复一日的忙碌让他无暇顾及个人情感生活。然而，内心深处，他对爱情的渴望却从未熄灭。这天，他在朋友的推荐下，打开了牛客网。这个他曾经只为寻找技术交流和求职机会的平台，如今却承载着他对爱情的新期待。他的指尖在 “求职意向” 一栏停顿了片刻，随即轻轻将 “求职意向” 更改为 “寻爱之旅”，并郑重地点击了发布。起初，林小宇的 “寻爱之旅” 并未引起太多关注。偶尔有人点赞或留下简短的评论，却未深入交流。但他并未气馁，依然坚持在平台上分享自己的生活点滴和工作心得。渐渐地，他的真诚和专...