2024年前端常见跨域解决方案（全），2024年最新前端处理数据渲染页面的方式

码农世界 2024-05-15 前端 64 次浏览 0个评论

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这里分享一些前端学习笔记：

html5 / css3 学习笔记
JavaScript 学习笔记
Vue 学习笔记

// 前端设置是否带cookie

xhr.withCredentials = true;

示例代码：

var xhr = new XMLHttpRequest(); //

// 前端设置是否带cookie

xhr.withCredentials = true;

xhr.open(‘post’, ‘http://www.domain2.com:8080/login’, true);

xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

xhr.send(‘user=admin’);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

alert(xhr.responseText);

}

};

2.）jQuery ajax

$.ajax({

…

xhrFields: {

withCredentials: true // 前端设置是否带cookie

},

crossDomain: true, // 会让请求头中包含跨域的额外信息，但不会含cookie

…

});

2、服务端设置：

若后端设置成功，前端浏览器控制台则不会出现跨域报错信息，反之，说明没设成功。

1.）php后台：

2.）Java后台：

/*
- 导入包：import javax.servlet.http.HttpServletResponse;
- 接口参数中定义：HttpServletResponse response
  
  */
  
  // 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加’/’
  
  response.setHeader(“Access-Control-Allow-Origin”, “http://www.domain1.com”);
  
  // 允许前端带认证cookie：启用此项后，上面的域名不能为’*'，必须指定具体的域名，否则浏览器会提示
  
  response.setHeader(“Access-Control-Allow-Credentials”, “true”);
  
  // 提示OPTIONS预检时，后端需要设置的两个常用自定义头
  
  response.setHeader(“Access-Control-Allow-Headers”, “Content-Type,X-Requested-With”);
  
  四、Nodejs中间件代理跨域
  
  node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。
  
  1、非vue框架的跨域（2次跨域）
  
  利用node + express + http-proxy-middleware搭建一个proxy服务器。
  
  1.）前端代码示例：
  
  var xhr = new XMLHttpRequest();
  
  // 前端开关：浏览器是否读写cookie
  
  xhr.withCredentials = true;
  
  // 访问http-proxy-middleware代理服务器
  
  xhr.open(‘get’, ‘http://www.domain1.com:3000/login?user=admin’, true);
  
  xhr.send();
  
  2.）中间件服务器：
  
  var express = require(‘express’);
  
  var proxy = require(‘http-proxy-middleware’);
  
  var app = express();
  
  app.use(‘/’, proxy({
  
  // 代理跨域目标接口
  
  target: ‘http://www.domain2.com:8080’,
  
  changeOrigin: true,
  
  // 修改响应头信息，实现跨域并允许带cookie
  
  onProxyRes: function(proxyRes, req, res) {
  
  res.header(‘Access-Control-Allow-Origin’, ‘http://www.domain1.com’);
  
  res.header(‘Access-Control-Allow-Credentials’, ‘true’);
  
  },
  
  // 修改响应信息中的cookie域名
  
  cookieDomainRewrite: ‘www.domain1.com’ // 可以为false，表示不修改
  
  }));
  
  app.listen(3000);
  
  console.log(‘Proxy server is listen at port 3000…’);
  
  3.）Nodejs后台同（六：nginx）
  
  2、 vue框架的跨域（1次跨域）
  
  利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下，由于vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域，无须设置headers跨域信息了。
  
  webpack.config.js部分配置：
  
  module.exports = {
  
  entry: {},
  
  module: {},
  
  …
  
  devServer: {
  
  historyApiFallback: true,
  
  proxy: [{
  
  context: ‘/login’,
  
  target: ‘http://www.domain2.com:8080’, // 代理跨域目标接口
  
  changeOrigin: true,
  
  secure: false, // 当代理某些https服务报错时用
  
  cookieDomainRewrite: ‘www.domain1.com’ // 可以为false，表示不修改
  
  }],
  
  noInfo: true
  
  }
  
  }
  
  五、 WebSocket协议跨域
  
  WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。
  
  原生WebSocket API使用起来不太方便，我们使用http://Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。
  
  1.）前端代码：
  user input：
  2.）Nodejs socket后台：
  
  var http = require(‘http’);
  
  var socket = require(‘socket.io’);
  
  // 启http服务
  
  var server = http.createServer(function(req, res) {
  
  res.writeHead(200, {
  
  ‘Content-type’: ‘text/html’
  
  });
  
  res.end();
  
  });
  
  server.listen(‘8080’);
  
  console.log(‘Server is running at port 8080…’);
  
  // 监听socket连接
  
  socket.listen(server).on(‘connection’, function(client) {
  
  // 接收信息
  
  client.on(‘message’, function(msg) {
  
  结尾
  
  学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
  
  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
  
  高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。