小白看这里 怎么解决跨域问题

本文介绍了跨域现象及其产生的原因——同源策略的限制。针对跨域问题,提出了三种解决方案: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://线上的地址' // 我们要代理的真实接口地址
        }
      }
    }
  }
}

2.3联系后端

让后端统一处理(简单高效 ,强烈推荐)

  

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值