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

总结

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

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

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

• 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后台：

<?php header("Access-Control-Allow-Origin:*"); ?>

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性能相关的书籍，以及设计者模式，在实践中都会用的到。