小白看这里怎么解决跨域问题-优快云博客

本文链接：https://blog.youkuaiyun.com/wzfnba/article/details/128423472

本文介绍了跨域现象及其产生的原因——同源策略的限制。针对跨域问题，提出了三种解决方案：1) JSONP，通过动态创建script标签规避同源策略；2) 使用反向代理，如在Vue CLI中配置请求代理解决开发环境跨域；3) 后端统一处理跨域请求。每种方法都提供了具体的操作步骤和示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.跨域问题产生

1.1 跨域现象

在A地址想B地址发送请求时,如果A地址跟B地址协议 ,域名,端口号不全相同时,则说明请求是跨域的

1.2原因

跨域问题的产生那我们就不得不说一下同源策略 , 同源策略是客户端的安全度量标准,其目的是防止某个文档或者脚本从多个不同源装载,所谓的同源指的是:协议域名端口号相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和文档的属性
所以跨域产生由以上两种原因 1 同源策略影响 2 请求为ajax请求

2.解决方法

2.1 JSONP

原理:动态的创建一个script标签,利用script标签的src属性不受同源策略限制,因为所有的src属性和href属性都不受同源策略限制,可以请求第三方服务器数据内容

步骤

1 创建一个script标签

2 script的src属性设置接口地址

3 接口参数,必须要带一个自定义函数名要不然后台无法返回数据

4 通过第一函数名去接收后台返回数据

2.2 反向代理

通过配置vue-cli请求代理解决开发环境下的跨域问题

这里需要我们先注释掉基地址 2 在vue.config.js中进行如下配置

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://线上的地址/api/login
        '/api': {
          target: 'http://线上的地址' // 我们要代理的真实接口地址
        }
      }
    }
  }
}