前端如何解决跨域问题（大概）

最新推荐文章于 2024-05-13 01:20:29 发布

键盘打烂月入过万

最新推荐文章于 2024-05-13 01:20:29 发布

阅读量476

点赞数

文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/weixin_67271921/article/details/130394277

版权

跨域问题是指在浏览器中，当一个网站的JavaScript代码试图访问另一个网站的资源时，浏览器会阻止这个请求，因为它违反了同源策略。同源策略规定，浏览器只允许在同一个域名下加载的文档之间进行交互。

解决跨域问题的方法有以下几种：

服务器端设置响应头：可以在服务器端设置 Access-Control-Allow-Origin 响应头来允许指定来源的跨域请求，例如设置为 * 表示允许来自任何来源的请求。

JSONP (JSON with Padding)：利用 script 标签不受同源策略限制的特性，将数据包装在一个回调函数中返回给前端，从而实现跨域请求。

CORS (Cross-Origin Resource Sharing)：CORS 是一种新型的跨域解决方案，通过在服务端设置响应头来控制是否允许跨域请求。在客户端发起跨域请求时，浏览器会先发送一个预检请求（OPTIONS），如果服务器返回了允许跨域的响应头，则浏览器会继续发送真正的请求。

代理服务器：在本地或者同域名下搭建一个代理服务器，将跨域请求发送到代理服务器上，在代理服务器上再转发请求到目标服务器，从而实现跨域访问。

总之，在不同场景下选择不同的解决方案可以有效地解决跨域问题。

在vue项目中如何解决跨域问题

module.exports = {
  devServer: {
    proxy: {
      '/api': { // 设置代理路径，以/api开头的路径都会被代理
        target: 'http://localhost:3000', // 目标服务器地址
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '' // 将/api替换为空字符（去掉/api）
        }
      }
    }
  }
}