VUE2:关于axios的跨域问题(No ‘Access-Control-Allow-Origin‘ )以及解决方案(亲测有用,全流程配图文版,建议收藏)

这篇具有很好参考价值的文章主要介绍了VUE2:关于axios的跨域问题(No ‘Access-Control-Allow-Origin‘ )以及解决方案(亲测有用,全流程配图文版,建议收藏)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今天在开发中新写了一个前端的项目作为集成,公司是保密项目所以公司代码肯定是不能粘贴了,回家之后还是觉得记录一下比较好,所以自己模拟了一个来给大家解决一下。

在VUE2的开发过程中跨域问题肯定是前端程序员都遇到过的问题,尤其还是像我这种半吊子前端,报错内容如下:

ccess to XMLHttpRequest at 'http://localhost:8080/XXXXXXXX' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET http://localhost:8080/XXXX net::ERR_FAILED 200 (OK)

Uncaught (in promise) Error: Network Error

axios设置access-control-allow-origin,开发问题报错解决方案,javascript,java,ajax

等等之类的都是跨域问题报错,接下来看看如何解决:

首先看main.js文件:

axios设置access-control-allow-origin,开发问题报错解决方案,javascript,java,ajax

在main.js文件中添加:

import Axios from 'axios'
Axios.defaults.baseURL = '/api'
Axios.defaults.headers.post['Content-Type'] = 'application/json'

axios设置access-control-allow-origin,开发问题报错解决方案,javascript,java,ajax

接下来再看vue.config.js文件,没有就自己创建一个,但是一般都会有,名字不能错

axios设置access-control-allow-origin,开发问题报错解决方案,javascript,java,ajax

其主要添加devServer如下:

  devServer: {
    host: '0.0.0.0', //可以忽略不写
    port: 8081,//它是用来修改你打开后的端口号的
    open: true,//值为 true的话,项目启动时自动打开到浏览器里边, false不会打开
    proxy: {
      '/api': {
        target: ' http://localhost:8080/',//换成你自己项目的开发或者生产地址
        ws: false, //也可以忽略不写,不写不会影响跨域
        changeOrigin: true, //是否开启跨域,值为 true 就是开启, false 不开启
        pathRewrite: {
          '^/api': ''//注册全局路径, 但是在你请求的时候前面需要加上 /api  
        }
      }
    }
  }

添加后效果如下: 

 axios设置access-control-allow-origin,开发问题报错解决方案,javascript,java,ajax

 其原理大致就是我刚刚添加了Axios.defaults.baseURL = '/api',其每次发送请求都会加一个/api的前缀,这里拦截器拦截api前缀后将其替换为 target。

接下来看axios请求:这里随意写了一个钩子函数:

axios设置access-control-allow-origin,开发问题报错解决方案,javascript,java,ajax

看看效果jke

axios设置access-control-allow-origin,开发问题报错解决方案,javascript,java,ajax

可以看到请求成功,没有跨域报错了。 前端之路学习慢慢,之后继续分享实际工作中遇到的问题以及解决方案,觉得有用就点个赞!!!!文章来源地址https://www.toymoban.com/news/detail-756026.html

到了这里,关于VUE2:关于axios的跨域问题(No ‘Access-Control-Allow-Origin‘ )以及解决方案(亲测有用,全流程配图文版,建议收藏)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中解决ajax跨域问题(no “access-control-allow-origin”)

    跨域是是因为浏览器的同源策略限制,是浏览器的一种安全机制,服务端之间是不存在跨域的。 所谓同源指的是两个页面具有相同的协议、主机和端口,三者有任一不相同即会产生跨域。 常见的跨域解决方法有 cors 这个需要由后端在响应头上配置 jsonp 借助script中的标签src,

    2024年02月10日
    浏览(38)
  • 跨域问题?无需担心!学习如何解决 Axios 的跨域限制

    跨域是指访问另外一个域的资源,由于浏览器的同源策略,默认情况下使用 XMLHttpRequest 和 Fetch 请求时是不允许跨域的。跨域的根本原因是浏览器的同源策略,这是由浏览器对 JavaScript 施加的安全限制。 跨域请求被阻止 (Cross-Origin Request Blocked) : 这是由浏览器实施的同源策略

    2024年04月27日
    浏览(49)
  • 关于vite的跨域问题

    vue需要配置自定义代理规则进行跨域访问 官方文档:https://cn.vitejs.dev/config/server-options.html#server-proxy 在vite.config.ts修改: 发起请求的地方: 生产环境配置跨域,还需要编辑nginx的配置文件,在 server 对象中再添加一个 location 对象(别忘了上一个对象末尾的分号 ; )

    2024年02月04日
    浏览(40)
  • 前后端分离项目跨域问题No ‘Access-Control-Allow-Origin‘解决方案

    一.问题背景 前后端分离项目跨域问题,浏览器控制台报错: No \\\'Access-Control-Allow-Origin\\\' header is present on the requested resource. 请求方法为OPTIONS,状态值为302或403。 本文解决常见的CORS跨域问题,以及,集成CAS 5.3单点登录内嵌页面时,发送复杂请求产生的跨域问题。 二.解决方案

    2024年02月02日
    浏览(52)
  • vue2 利用网络代理axios实现开发环境前端跨域

    vue2 利用网络代理axios实现前端跨域 vue.config.js 配置代理 vue文件 实现开发环境跨域请求 测试生产环境跨域跳转 https://blog.csdn.net/weixin_43858851/article/details/137518111?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22137518111%22%2C%22source%22%3A%22weixin_43858851%22%7D

    2024年04月12日
    浏览(44)
  • 解决SpringBoot和前端Vue的跨域问题

    一、为什么会出现跨域问题           出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同

    2024年02月04日
    浏览(82)
  • 浏览器同源策略导致跨域问题 No ‘Access-Control-Allow-Origin‘ header 原因及解决方式--(后端、nginx、前端)

    目录 现象 原因 浏览器同源策略 导致结果: 解决方案 跨源资源共享(CORS) 各个端解决方法: 后端: 方式1:重载WebMvcConfigurer方法 方式2:配置监听CorsFilter 方式3:相关类上加注解 @CrossOrigin 注意事项: Nginx解决: 情况1: 前端解决: 本人身份:后端 今天部署线上环境前端

    2024年01月23日
    浏览(54)
  • 解决跨域问题:Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access-Control-Allow-Origin‘ head

    当我实现前后端分离的时候,遇到了这个问题: Access to XMLHttpRequest at ‘http://localhost:8080/xxx’ from origin ‘http://localhost:63342’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 后端响应没有带上“ access-control-allow-origin”和“ access-control-

    2024年02月11日
    浏览(64)
  • node+vue开发环境下接口数据传递中的跨域问题

    大部分浏览器自带的保护措施,限制用户在一个域名下请求另一个域名的数据 跨域对于前后端开发者来说,就像一块狗皮膏药,无论是面试还是开发中,都会经常遇到。 之所以出现跨域问题,是因为浏览器的同源策略,为了隔离潜在的恶意文件,为了防御来自歪门邪道的攻

    2024年01月24日
    浏览(52)
  • node+vue+express开发环境下接口数据传递中的跨域问题

    大部分浏览器自带的保护措施,限制用户在一个域名下请求另一个域名的数据 跨域对于前后端开发者来说,就像一块狗皮膏药,无论是面试还是开发中,都会经常遇到。 之所以出现跨域问题,是因为浏览器的同源策略,为了隔离潜在的恶意文件,为了防御来自歪门邪道的攻

    2024年02月19日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包