码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift

  • vue跨域问题解决：Access to XMLHttpRequest at‘httplocalhost

    最近写vue项目遇到了跨域问题，报了Access to XMLHttpRequest at‘httplocalhost的错，在网上找了一些资料，得以解决，分享给大家！

    1、后端请求接口配置

     本人使用的  `Java`  作为后端

    在请求接口上添加 @CrossOrigin  

    1. @CrossOrigin
    2. @GetMapping("/xxxx")
    3. public Result sendEmailCode(@PathVariable String email) throws WrongInputException {
    4.     // 编写你的业务逻辑....
    5. }
      6.  

       

      2、通过配置vue.config.js、proxy
       

      2.1、背景补充（jsonp）
       

      首先，来个背景，为什么会出现跨域？--（先了解一下另一种jsonp，我用的不是这种方法，但怎么说呢，比如面试，多了解几种方法总是好的，jsonp就不贴具体方法了，因为我这次没试）
       

      因为浏览器有同源策略（补充：协议、域名、端口相同是同源，
       同源策略限制：
       

      1. js脚本不能访问另一个域下的cookie、localstorage
      2. 不能操作另一个域dom
      3. ajax不能跨域请求
       

      也就是限制不同源的资源交互，不能跨域访问，但是在一个页面中引入不同域的js却可以自由访问，例如img这个标签，基于这个原理jsonp出现。
       jsonp和json没关系，json是数据交换格式，jsonp是非官方数据传输协议。
       怎么实现，前端传callback参数，后端用这个参数的值作为函数名称包裹json数据，这样给前端的就是js代码了。
       

      2.2、实践解决跨域方法（基于封装好的axios，非原生）
       

      1、在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域，在proxy中设置要访问的地址，并重写/api为空的字符串。
       

      1. vue.config.js
      2.  
      3. // const { defineConfig } = require('@vue/cli-service')
      4. //在vue中使用proxy进行跨域的原理是：
      5. //将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），
      6. //再由本地的服务器去请求真正的服务器。
      7. module.exports = {
      8.   devServer:{
      9.     proxy:{
      10.       '/api':{//表示拦截以/api开头的请求路径
      11.         target:'http://（这里填你项目真实的后端地址）',
      12.         changOrigin: true,//是否开启跨域
      13.         pathRewrite:{
      14.           '^/api':'' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
      15.         }
      16.       }
      17.     }
      18.   }
      19. }
       

      也就是把vue.config.js配置成上图所示。
       

       

      2、在axios.create的时候将baseURL设置为api ，简单两步，就完成啦。
       

      1. import axios from 'axios'
      2. var http=axios.create({
      3.     baseURL:'api',//把原来的项目地址，改成api，解决跨域问题
      4.     timeout:3000
      5. })
       

      我就是通过以上这方式，解决了我的跨域问题，希望给大家参考。
       

      再补充一下原理：
       

      1、为什么要重写api变为空字符？
       

      因为如果像我们那样配置好后，我们请求的实际路径会带上api，但我们发起请求的时候是不需要api的，所以要把他变成空字符。
       

      2、在vue中使用proxy进行跨域的原理是：
       

      将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。
       

       

       

      
                
                    
                

                
    6. 

                    相关阅读:
      
                    
ISO20000认证一般要多少钱                            
      
高阶数据结构—— 哈希                            
      
beego-高级查询——QueryTable,orm                            
      
upload-labs关卡9(基于win特性data流绕过)通关思路                            
      
异步非阻塞python3代码                            
      
使用jieba测试分词并且增加自定义字典                            
      
Java0基础入门，看完这篇就够了                            
      
“新KG”视点 | 漆桂林——知识图谱和大语言模型的共存之道                            
      
Web安全测试详解                            
      
postman环境变量的设置                            
      
                          
                
      7. 
                
    7. 
                    原文地址：https://blog.csdn.net/jahdgja/article/details/127858298
                
      8. 

            
        

        
      
            
        
                
      • 
                    最新文章
                
        • 
                
      • 
                    
攻防演习之三天拿下官网站群                            
        
数据安全治理学习——前期安全规划和安全管理体系建设                            
        
企业安全 | 企业内一次钓鱼演练准备过程                            
        
内网渗透测试 | Kerberos协议及其部分攻击手法                            
        
0day的产生 | 不懂代码的"代码审计"                            
        
安装scrcpy-client模块av模块异常，环境问题解决方案                            
        
leetcode hot100【LeetCode 279. 完全平方数】java实现                            
        
OpenWrt下安装Mosquitto                            
        
AnatoMask论文汇总                            
        
【AI日记】24.11.01 LangChain、openai api和github copilot                            
        
                            
                
        • 
            
      

            
        
                
      • 
                    热门文章
                
        • 
                
      • 
                    
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！                            
        
奉劝各位学弟学妹们，该打造你的技术影响力了！                            
        
五年了，我在 CSDN 的两个一百万。                            
        
Java俄罗斯方块，老程序员花了一个周末，连接中学年代！                            
        
面试官都震惊，你这网络基础可以啊！                            
        
你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法                            
        
心情不好的时候，用 Python 画棵樱花树送给自己吧                            
        
通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！                            
        
13 万字 C 语言从入门到精通保姆级教程2021 年版                            
        
10行代码集2000张美女图，Python爬虫120例，再上征途                            
        
                            
                
        • 
            
      

        
      
    




    
    
    
    

      
    
      
        
      
            
      
                
      
                    Copyright © 2022 侵权请联系2656653265@qq.com   
                    京ICP备2022015340号-1
                
      
                
      
                    正则表达式工具
                    cron表达式工具
                    密码生成工具
                
      
                
      
                    
                    
      京公网安备 11010502049817号