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

前端基础之《Vue(23)—跨域问题》

一、跨域问题说明

1、每一个“域”都由协议、IP地址和端口号,这三部分组成。那么什么是跨域?当你从当前域访问另一个域时,如果上述三个部分有任何一个部分不相同,就是跨域

比如:http://localhost:8080  -->  http://localhost:9999  是跨域

2、为什么跨域浏览器会拒绝
在所有浏览器中都内置了一个安全策略,叫做CORS同源策略,这个同源策略有什么特点呢?同源策略会阻塞ajax跨域请求。

3、在8080端口上,使用ajax请求9999服务器接口,会被阻塞吗?
如果这件事发生在浏览器中,必然会被阻塞。如果发生非浏览器环境,比如node环境中,肯定不会被阻塞。

4、在8080端口上,使用JSONP请求9999服务器接口,会被阻塞吗?
肯定不会,因为JSONP不是ajax。哪怕这个行为发生在浏览器中,也不会被阻塞。

5、以浏览器环境为例,你有哪些解决跨域被CORS阻塞的方案呢?
(1)使用JSONP
因为JSONP不是ajax,同源策略管不了。但是JSONP只能解决GET请求的跨域问题。
(2)CORS
要求在后端服务器配置CORS的header字段,这种做法相当于把后端接口变成了开源接口。
(3)代理
在本地开发中,我们使用webpack做代理;在生产环境下,我们使用nginx做代理。

6、vue.config.js

const { defineConfig } = require('@vue/cli-service')// 这是@vue/cli这个脚手架指定的配置文件,它的背后是webpack
// 配置文件修改后,务必要重启
module.exports = defineConfig({transpileDependencies: true,devServer: {// 当vue项目中使用ajax发起请求时,如果请求路径中有/api,表示匹配成功// 背后的node服务就会将其代理到target远程服务器上proxy: {'/api': {target: 'http://localhost:9999',  // 是真实服务器地址changeOrigin: true}}}
})

7、为什么代理可以解决跨域问题
保证了ajax同域请求。

http://www.dtcms.com/a/286292.html

相关文章:

  • Effective Modern C++ 条款14:如果函数不抛出异常请使用noexcept
  • 如何将本地Git仓库推送到远程仓库的一个文件中并保留Commit记录
  • 对于编码电机-520直流减速电机
  • 硬核电子工程:从硅片到系统的全栈实战指南—— 融合电路理论、嵌入式开发与PCB设计的工程艺术
  • 正则表达式完全指南:从入门到实战
  • Web3加密货币交易:您需要知道的所有信息
  • 五分钟掌握 TDengine 数据文件的工作原理
  • 《设计模式之禅》笔记摘录 - 8.命令模式
  • 【Mediatek】AN7563搭建编译环境操作说明
  • 1 初识C++
  • 【java 安全】 IO流
  • 20250718-3-Kubernetes 应用程序生命周期管理-Pod对象:存在意义_笔记
  • Android性能优化之包体积优化
  • C++算法竞赛篇:DevC++ 如何进行debug调试
  • Django 实战:I18N 国际化与本地化配置、翻译与切换一步到位
  • 第7天 | openGauss中一个数据库中可以创建多个模式
  • 51c视觉~合集13
  • 互联网医疗健康服务包的核心内容架构与模块组合
  • 小记_想写啥写啥_实现行间的Latex公式_VScode始终折叠大纲
  • 构建直播平台大体的流程
  • gcc 源码阅读---编译器后端实现的关键数据结构
  • DOM笔记
  • 什么是KL散度
  • Android-EDLA【CTS】CtsInputMethodTestCases存在fail
  • 4G模块 A7680发送中文短信到手机
  • 高精度减法模版和分析(C++版本)
  • 嵌入式八股(持续更新)
  • 【算法训练营Day14】二叉树part4
  • windows终端美化(原生配置+Oh My Posh主题美化)
  • 客诉:危机到信任的重建