跨域(axios+express)
发布网友
发布时间：2024-10-23 21:04
共1个回答
热心网友
时间：2024-11-09 22:16
同源策略是Netscape提出的安全策略，了不同源的资源交互。它包括协议、端口和主机相同则为相同源，反之则为不同源。此策略保护了用户数据安全，避免了恶意文件的潜在风险。不同源间无法读取非同源的Cookie、DOM或执行AJAX请求，以防止数据泄露。
当需要跨域时，可采用JSONP或CORS方法。JSONP利用拥有“src”属性的标签不受同源策略，通过向服务端传递一个回调函数，服务端返回的JSON数据包裹在该函数内，客户端可自动处理返回数据。CORS则是一个允许浏览器向跨源服务器发出XHR请求的W3C标准，分为简单请求和非简单请求。
简单请求要求方法为GET、POST、PUT、DELETE，并且HTTP头信息只包含特定字段。服务器需响应Access-Control-Allow-Origin、Access-Control-Allow-Credentials、Access-Control-Expose-Headers等头信息。非简单请求则先进行预检请求，确保所有条件满足后才会发送实际请求。
CORS相比JSONP更强大，支持所有类型的HTTP请求，且能处理老式浏览器及不支持CORS的网站。代理则用于服务器间请求，绕过同源策略。
以网络书城项目为例，使用Vue、Axios、Node、Express、MongoDB技术栈。初次遇到前端向后端获取书籍分类目录时，发现因端口不同发生跨域问题。通过在后端添加CORS响应头解决了简单请求的跨域问题。在处理注册时向后端发送JSON信息的非简单请求时，需在后端对预检请求做出响应，确保请求成功。最终，完整CORS配置成功解决了跨域问题。
