axios实现跨域三种方法_cors跨域axios

axios实现跨域三种方法_cors跨域axios跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。所谓同源是指,域名,协议,端口均相同,浏览器执行js脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。以下举例:(1)http://www.123.com/index.html调用http://www.123.com/server.php(非跨域)(2)…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。

所谓同源是指,域名,协议,端口均相同,浏览器执行 js 脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。

以下举例:

(1)http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)

(2)http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)

(3)http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)

(4)http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)

(5)http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)

(6)localhost和127.0.0.1虽然都指向本机,但也属于跨域。

一,前端解决之 代理

仅开发环境下建议如此。。

1.  vue-cli 2.x 版本解决方法如下

(1) Vue 的 config 文件夹下的 index.js 文件中,在 proxyTable 对象中书写跨域配置项:将以  /api 开头的请求地址基础URL替换为 http://localhost:8888

(2)将 axios 的 baseURL 改为 /api

4b02565d296dfb7e38070566504c1976.png

a195021521da076f4c7b4cbda596371c.png

2.  vue-cli 3.x 版本解决方法如下

(1)在项目根目录下创建全局配置文件 vue.config.js

(2)在配置文件中书写跨域配置(如下图)

(3)将 axios 的 baseURL 改为 /api

b3f86d1d6d2002137c715422ac25dcd3.png

二,后端springboot项目解决之 配置项

推荐在服务端进行跨域相关配置,在项目中新建允许跨域配置类,如下图。

339b90c030b8026bd40f5006a7c10f6b.png

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/194764.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • kettle工具的作用和使用「建议收藏」

    kettle工具的作用和使用「建议收藏」最近公司一个同事离职,由我来接手他手上的一个项目,我负责开发后台,因为设计到脚本统计数据,需要做定时任务将日表数据统计到月表或者年表。于是该项目用到了Kettle,用了之后才发现,这是个好东西啊。一.了解Kettle工具Kettle最早是一个开源的ETL工具,以Java开发,支持跨平台运行,其特性包括:支持100%无编码、拖拽方式开发ETL数据管道;可对接包括传统数据库、文件、大数据平台、接口、流数据等数据源;支持ETL数据管道加入机器学习算法。二.Kettle下载和安装1.官网下载地址:https

    2022年10月16日
    2
  • pip卸载重新安装_python怎么更新pip

    pip卸载重新安装_python怎么更新pip不小心将python带的pip卸载了,怎么办?刚在更新pip的时候没有安装成功,但是却卸载成功了!于是乎pip就没有了。上网一查找到解决办法。找到你python的安装目录的scripts文件夹。win+R打开DOS命令窗口输入cmd;cd到你的Scripts文件夹中:具体做法为:(1):直接输入盘符:(2):cd到你的python安装目录下的的Scripts文件夹下:(…

    2022年10月19日
    6
  • laravel validate 设置为中文(验证提示为中文)

    laravel validate 设置为中文(验证提示为中文)

    2021年10月23日
    41
  • Python 爬虫和数据分析实战

    Python 爬虫和数据分析实战课程介绍本课程是Python爬虫和数据分析项目实战课程,主要分3部分:第1部分是Python爬虫,主要使用Urllib3和BeautifulSoup抓取天猫商城和京东商城胸罩销售数据,并保存到SQLite数据库中;第2部分是对抓取的胸罩销售数据进行数据清洗,主要是去除空数据,让数据格式更规范;第3半部分利用Pandas对数据进行分析,以及使用M…

    2022年5月29日
    29
  • 纯前端实现—用户注册登录界面

    纯前端实现—用户注册登录界面理想实现效果:1.注册界面的实现<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><title>注册界面</title><linkrel=”stylesheet”href=”RESETCSS.css”><style>div{width:300px;

    2022年4月19日
    89
  • linux文件重命名命令rename_修改文件名linux

    linux文件重命名命令rename_修改文件名linuxlinux下重命名文件有两种方式:1.较简单的处理命令:mvmv原文件名新文件名如:mvmyFilenewName将MyFile重命名为newName.2.linux提供了一个重命名文件命令:renamerenamefromtofile1file2。。。如:renamemyFilenewNamemyFile.text将myFile.text重命名为newName.text这个命令在批量重命名是更好用如:renamemyFilenewNamemy

    2025年10月25日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号