vue跨域问题:Access to XMLHttpRequest at‘httplocalhost解决
前言
前两天遇到了跨域问题，报了Access to XMLHttpRequest at‘httplocalhost的错，在网上找了一些资料，我是通过配置vue.config.js、proxy实现的，感觉非常方便，分享给大家！
一、背景补充（jsonp）
首先，来个背景，为什么会出现跨域？--（先了解一下另一种jsonp，我用的不是这种方法，但怎么说呢，比如面试，多了解几种方法总是好的，jsonp就不贴具体方法了，因为我这次没试）
因为浏览器有同源策略（补充：协议、域名、端口相同是同源，
同源策略限制：
1、js脚本不能访问另一个域下的cookie、localstorage
2、不能操作另一个域dom
3、ajax不能跨域请求
也就是限制不同源的资源交互，不能跨域访问，但是在一个页面中引入不同域的js却可以自由访问，例如img这个标签，基于这个原理jsonp出现。
jsonp和json没关系，json是数据交换格式，jsonp是非官方数据传输协议。
怎么实现，前端传callback参数，后端用这个参数的值作为函数名称包裹json数据，这样给前端的就是js代码了。
二、实践解决跨域方法（基于封装好的axios，非原生）
1.在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域，在proxy中设置要访问的地址，并重写/api为空的字符串。
vue.config.js
// const { defineConfig } = require('@vue/cli-service')
//在vue中使用proxy进行跨域的原理是：
//将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），
//再由本地的服务器去请求真正的服务器。
module.exports = {
devServer:{
proxy:{
'/api':{//表示拦截以/api开头的请求路径
target:'http://（这里填你项目真实的后端地址）',
changOrigin: true,//是否开启跨域
pathRewrite:{
'^/api':'' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
}
}
}
}
}也就是把vue.config.js配置成上图所示。
2、在axios.create的时候将baseURL设置为api ，简单两步，就完成啦。
http.js（封装axios的那个文件）
import axios from 'axios'
var http=axios.create({
baseURL:'api',//把原来的项目地址，改成api，解决跨域问题
timeout:3000
})我就是通过以上这两步，解决了我的跨域问题，希望给大家参考。
再补充一下原理：
1、为什么要重写api变为空字符？
因为如果像我们那样配置好后，我们请求的实际路径会带上api，但我们发起请求的时候是不需要api的，所以要把他变成空字符。
2、在vue中使用proxy进行跨域的原理是：
将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。
总结
到此这篇关于vue跨域问题:Access to XMLHttpRequest at‘httplocalhost解决的文章就介绍到这了,更多相关vue跨域问题解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了vue-cli5关于yarn的一个小坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下2022-10-10
详解element上传组件before-remove钩子问题解决
这篇文章主要介绍了详解element上传组件before-remove钩子问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了Vue 实现手动刷新组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
本文主要介绍了vue路由权限和按钮权限的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要为大家详细介绍了Vue组件之事件总线和消息发布订阅，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这一篇主要是创建一个vue项目并结合饿了么框架element-ui的文章。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
这篇文章主要给大家介绍了关于Vue如何动态设置el-table操作列的宽度自适应,很多页面都需要用到表格组件el-table,如果没有给el-table-column指定宽度,默认情况下会平均分配给剩余的列,需要的朋友可以参考下2023-07-07
使用axios请求接口,几种content-type的区别详解
今天小编就为大家分享一篇使用axios请求接口,几种content-type的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
最新评论