Vue小模块之用户登录功能（六）使用axios解决‘Access-Control-Allow-Origin’跨域

最新推荐文章于 2024-08-07 12:49:40 发布
最新推荐文章于 2024-08-07 12:49:40 发布
阅读量10w+ 收藏 30
点赞数 8
分类专栏： Vue.js node.js Web编程实战 文章标签： Vue.js node.js Express axios javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sps900608/article/details/79599121
版权
本文介绍了一个Vue小模块的用户登录功能，重点在于如何使用axios处理'Access-Control-Allow-Origin'跨域错误。技术栈包括Vue.js、Vuex、vue-router、axios、webpack和element。首先介绍了引入axios的步骤，接着演示了发送Ajax请求的方法，并针对出现的跨域错误，解释了错误原因及解决方案，即在后端服务器端添加相应头部设置，从而成功完成登录功能。
摘要由CSDN通过智能技术生成
最低0.47元/天 解锁文章
究极死胖兽
关注
专栏目录
VUE axios 跨域问题 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
lelesidai的博客
07-07 6409
开发环境中，使用axios调用接口时，出现跨域的时候会被浏览器拦截，故而造成请求失败，并且在控制台中显示 No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8081’ is therefore not allowed access.** 第一步：看看你的项目根部有没有vue.config.js这个文件； 如果没有那你要用“终端”输入“vue ui” 打
ajax 设置Access-Control-Allow-Origin实现跨域访问
06-06
ajax跨域访问是一个老问题了，解决方法很多，比较常用的是JSONP方法，JSONP方法是一种非官方方法，而且这种方法只支持GET方式，不如POST方式安全。 即使使用jquery的jsonp方法，type设为POST，也会自动变为GET。如果跨域使用POST方式，可以使用创建一个隐藏的iframe来实现，与ajax上传图片原理一样，但这样会比较麻烦。因此，通过设置Access-Control-Allow-Origin来实现跨域访问比较简单。
vue解决跨域的几种办法
2301_76965813的博客
05-11 9447
Access-Control-Allow-Credentials： 可选，值为布尔值，表示是否允许发送Cookie。三、CORS是跨域资源共享（Cross-Origin Resource Sharing），以 ajax 跨域请求资源，支持现代浏览器，IE支持10以上。Jsonp(JSON with Padding) 是 json 的一种”使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。明确许可，Cookie可以包含在请求中，一起发给服务器。，表示接受任意域名的请求，
计算机网络（五）什么是跨域问题（CORS）（Access-Control-Allow-Origin）（Access-Control-Allow-Credentials）
最新发布
m0_58466443的博客
08-07 1035
跨域是指浏览器在请求不同源（协议、域名或端口）的资源时遇到的限制，这是浏览器的内置安全机制。跨域问题通常发生在需要访问多个后端服务的场景中。为解决这一问题，W3C制定了CORS（跨源资源共享）协议，允许服务端通过特定的响应头字段（如Access-Control-Allow-Origin）来放行特定来源的请求。 CORS协议区分简单请求和非简单请求，简单请求自动携带Origin字段，非简单请求则先发送OPTIONS预检请求。服务端需正确设置Access-Control-Allow-Methods和Access
vue axios 配置上服务器后报错'Access-Control-Allow-Origin' header]（亲测）
gb4215287的博客
05-06 6163
vue项目配置到服务器后，请求能够成功，返回的数据也能在浏览器中看见，但是报错： Failed to loadhttp://pre.api.jmxy.mockuai.c...: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the r...
Vue之用户登录功能（六）使用axios解决‘Access-Control-Allow-Origin’跨域
慎独
08-03 1万+
文章目录引入axios发送Ajax请求解决’Access-Control-Allow-Origin’跨域问题总结 引入axios 1、回到vue脚手架工程，输入命令 npm i axios 2、在src/axios/目录下创建index.js import Vue from 'vue' import axios from 'axios' axios.defaults.baseURL = 'http://127.0.0.1:3000' Vue.prototype.$ajax = axios 3、在mai
使用axios解决‘Access-Control-Allow-Origin’跨域
热门推荐
山鹰的专栏
12-10 3万+
引入axios 回到vue脚手架工程，输入命令 npm i axios 在src/axios/目录下创建index.js import Vue from 'vue' import axios  from 'axios'  axios.defaults.baseURL="http://localhost:3000" Vue.prototype.$ajax = axios 在main.js中引入...
Access-Control-Allow-Origin: Dealing with CORS Errors in Angular
weixin_34161064的博客
01-08 300
https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/ Getting this error in your Angular app? No ‘Access-Control-Allow-Origin’ header is present on the requested resource. ...
VUE3 解决跨域问题 Access-Control-Allow-Origin_vue access-control-allow-origin
qq_58071132的博客
04-15 864
最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！
解决方案 ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’
12-20
标题 "解决方案 ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’" 提到的是一个在Web开发中常见的跨域问题。`Access-Control-Allow-Origin` 是一个用于控制资源跨域访问的...
Access-Control-Allow-Origin
08-27
谷歌浏览器扩展程序一键解决本地开发跨域问题，让你不用乱mock数据，Access-Control-Allow-Origin工具包
Access-Control-Allow-Origin 0.1.5_0
01-14
Access-Control-Allow-Origin 0.1.5_0，使用教程地址：
记使用axios跨域(头允许)问题Access-Control-Allow-Headers
零杠六
06-08 1万+
记使用axios跨域(头允许)问题Access-Control-Allow-Headers
Quasar Vue Springboot 跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested
Sail__的专栏
01-01 5398
困扰了近半个月的跨域问题解决了。 服务端是Springboot，前端是Vue 服务端地址是：http://localhost:8066 前端地址是：http://localhost:6006 前端发送请求使用的是axios，之前设置的baseURL是 process.env.BASE_API， 这个baseURL我在别的地方没有指定，因此是空，后来发现静态图片一直加载不上，我把baseUR...
vue项目跨域问题No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
m0_48390697的博客
09-08 541
vue项目跨域问题No 'Access-Control-Allow-Origin' header is present on the requested resource.
Vue+axios状态返回200，但是没有数据，提示Access-Control-Allow-Origin的问题
qq_37881606的博客
07-11 7318
解决Vue中axios请求接口返回200但是无数据的问题-0711记准备工作代码 准备工作 1、安装axios 2、在src文件夹建一个util的文件夹，文件夹下新建api.js 代码 第一步：在config文件夹下的index.js中找到dev，在dev中配置proxyTable内容 proxyTable: { '/api': { target: '接口域名，http...
vue axios 配置上服务器后报错'Access-Control-Allow-Origin' header]
weixin_30314813的博客
08-28 495
ue项目配置到服务器后，请求能够成功，返回的数据也能在浏览器中看见，但是报错： Failed to loadhttp://pre.api.jmxy.mockuai.c...: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when t...
vue+axios新手实践实现登陆
weixin_33918114的博客
06-06 1161
其实像这类的文章网上已经有很多很好的,写这篇文章，相当于是做个笔记，以防以后忘记用到的：1、 vuex 2、axios 3、vue-route 登陆流程为：1、提交登陆表单，拿到后台返回的数据2、将数据存入vuex vuex配置 这里直接跳过安装之类的，百度一大堆，我直接上代码 // store index.js import Vue f...
Vue3 axios解决跨域问题，报错Access-Control-Allow-Origin
09-05
Vue3中解决跨域问题，报错Access-Control-Allow-Origin的方法如下： 1. 在项目的config.js文件中添加以下配置： ```javascript proxy: { '/api': { target: 'http://localhost:8081', // 后端服务器的地址 changeOrigin: true, // 是否跨域 ws: true, // 是否代理 websockets secure: true, // 是否https接口 pathRewrite: { '^/api': '' // 路径重置 } } } ``` 这样配置后，所有以`/api`开头的请求都会被代理到后端服务器。 2. 在Vue文件中编写请求： ```javascript created() { axios.get('api/user/findUserAll').then(function (resp) { console.log(resp) }) } ``` 这样就可以使用axios发送跨域请求了，不再报错Access-Control-Allow-Origin。 需要注意的是，axios本质上是JavaScript的ajax封装，因此会受到同源策略的限制。为了解决跨域问题，我们使用代理方式将请求转发到后端服务器。同时，确保后端服务器已经配置了正确的跨域响应头，例如设置Access-Control-Allow-Origin为允许访问的域名。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue3解决跨域问题，报错Access-Control-Allow-Origin](https://blog.csdn.net/weixin_45425813/article/details/123911222)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue中axios实现数据交互与跨域问题](https://download.csdn.net/download/weixin_38745361/14902123)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值