当前位置：首页 > news >正文

前端如何解决跨域

news 来源：原创 2025/6/8 1:09:28

解决前端跨域问题有多种方法

JSONP：利用 <script> 标签的跨域能力，通过动态创建 script 标签并指定回调函数来获取数据。但只能处理 GET 请求，安全性较低。

JSONP 的原理是利用了 <script> 标签的跨域能力。因为浏览器允许 <script> 标签加载不同源的脚本。当我们动态创建一个 <script> 标签时，设置其 src 属性为跨域的 URL，并在 URL 中指定一个回调函数的名称。服务器端接收到这个请求后，会将数据作为参数传递给这个回调函数，并以 JavaScript 脚本的形式返回给浏览器。浏览器接收到这个脚本后就会执行，从而获取到数据
<script>
function callback(data) {
  // 处理获取到的数据
  console.log(data);
}
</script>
<script src="http://example.com/data?callback=callback"></script>
服务器端返回类似这样的脚本：
callback({ name: 'John' });
JSONP 的局限性在于只能处理 GET 请求，并且由于需要服务器端配合返回特定格式的数据，安全性相对较低，容易受到一些攻击。

CORS（跨域资源共享）：这是一种较为规范和安全的方式。服务器端设置响应头 Access-Control-Allow-Origin 等允许跨域访问。

CORS 是一种由服务器端设置响应头来允许跨域访问的方式。服务器通过在响应头中添加特定的字段，如 Access-Control-Allow-Origin （指定允许访问的源）、Access-Control-Allow-Methods （允许的请求方法）、Access-Control-Allow-Headers （允许的请求头）等，来告知浏览器是否允许跨域请求。
例如，服务器端的响应头可能像这样：
Access-Control-Allow-Origin: http://your-site.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
CORS 分为简单请求和预检请求。简单请求直接发送并获取响应，而预检请求会先发送一个 OPTIONS 请求来询问服务器是否允许当前的跨域请求，得到允许后再发送实际请求。
CORS 是一种规范且安全的跨域解决方案，但需要服务器端进行相应的配置支持。

代理服务器：在开发环境中，可以通过配置代理服务器，将请求转发到目标服务器，让浏览器认为是同源请求

假设我们的前端应用运行在 http://localhost:8080 这个地址，而要请求的数据在 http://example.com/api/data 这个不同源的地址。
这时，我们可以在开发环境的配置中（比如 vue.config.js 或者 webpack.config.js ）设置代理服务器。
以 Vue 项目为例，在 vue.config.js 中可以这样配置：
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}
上述配置中，'/api' 是我们定义的一个匹配路径的规则。当发送的请求路径以 /api 开头时，就会触发代理。
target 字段指定了要转发到的目标服务器地址，也就是 http://example.com 。
changeOrigin 设为 true ，表示改变请求头中的 Origin 字段，让服务器认为请求来自于它自己，从而实现跨域。
pathRewrite 用于重写请求路径，把 /api 去掉，以便正确地访问目标服务器上的资源。
这样，当浏览器发送一个请求，比如 http://localhost:8080/api/data 时，实际上会被代理服务器转发为 http://example.com/data ，从而让浏览器认为这是同源请求，成功获取到数据

vue.config.js和webpack.config.js各自有什么区别

vue.config.js 是 Vue 项目特有的配置文件。主要用于对 Vue 项目进行一些个性化的配置，比如设置开发服务器的代理、修改打包输出的路径、添加插件等。它专注于 Vue 项目相关的特定配置，并且是基于 Vue CLI 提供的一套配置体系。

webpack.config.js 则是 Webpack 的配置文件。Webpack 是一个更通用的模块打包工具，不仅仅用于 Vue 项目，也可以用于其他各种前端项目。在这个配置文件中，可以对模块的加载、打包的规则、插件的使用等进行非常详细和灵活的配置。

总结来说，vue.config.js 是针对 Vue 项目的特定配置，相对更简洁和专注于 Vue 相关的特性；而 webpack.config.js 是 Webpack 这个打包工具的通用配置，更全面和底层，适用于各种项目类型。

记忆口诀：“Vue 配置特定专，简洁针对 Vue 干。Webpack 通用全，各种项目皆可管

WebSocket：它不受同源策略的限制，可以实现跨域通信。

WebSocket 是一种全双工的通信协议，它建立在单个 TCP 连接上，服务器和客户端可以随时向对方发送数据。由于其协议本身的特性，不受同源策略的限制，可以实现跨域通信
const socket = new WebSocket('ws://example.com/socket');

socket.onopen = function() {
  socket.send('Hello Server!');
};

socket.onmessage = function(event) {
  console.log(event.data);
};
WebSocket 适用于需要实时双向通信的场景，如在线聊天、实时数据推送等。

记忆口诀：“跨域解决有几招，JSONP 旧不太好。CORS 规范又安全，代理转发也能搞。WebSocket 不受限，按需选择效果妙。