vue脚手架解决跨域

1.什么是跨域
1.浏览器，端口，域名只要有一项不同就会产生跨域，协议域名端口都相同才同域，否则都是跨域

2.如何解决跨域
1.首先在vue脚手架的根目录下创建一个vue.config.vue文件
2.然后vue脚手架会自动进行webpack配置，而vue.config.js文件就是进行修改默认的该配置的

3.配置的思路
1.创建vue.config.js文件，里面的devServer是进行开发环境的服务器配置的，有proxy是用来进行代理的转发，在proxy里的target设置转发的网址

4.跨域转发
1.因为跨域的问题，axios是无法请求网址数据的，但是浏览器可以，所以，应用代理转发请求数据到我们的网址中，而axios请求该网址，而axios请求该网址，相当于一个中间商进行了一次代码

代码展示

module.exports = {devServer: {  //开发环境的服务器配置// 是否自动弹出浏览器，默认falseopen: false,// 修改默认端口，默认8080port: 9090,proxy: {  //进行代理转发'/api': {// 转发的网址target: "http://m.sirfang.com/api",// 是否开启本地代理 默认truechangeOrigin: true,// 重要点pathRewrite: {'^/api': ''}}}}
}

vue文件中

   this.$axios.request({ url: "/api/home/shejishi", method: "get" }).then(res => {console.log(res);});

封装api请求后的变化
需要改变request请求里的公共网址设置

const server = axios.create({baseURL: '/api',timeout: 6000
})

vue脚手架解决跨域相关推荐

vue脚手架解决跨域问题-------配置反向代理
vue脚手架解决跨域问题-------配置反向代理参考文章: (1)vue脚手架解决跨域问题-------配置反向代理 (2)https://www.cnblogs.com/zbx-boke/p/9 ...
vue porxy 解决跨域
porxy // 配置文件vue.config.js 是固定名 // 必须放在项目根目录下,与src同级别 module.exports = {//devServer:开发服务器配置项devServe ...
vue配置解决跨域问题
我们在使用vue时,经常要遇到跨域的问题,其实这个问题很好解决,只需我们在vue-cli中配置一下即可. 实现跨越请求: 在config文件夹下找到index.js proxyTable: {&quo ...
vue cli 解决跨域线上 nginx 反向代理配置
前后分离 axios 接 api 跨域问题如图: 解决办法: 1. npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开 ...
【vue】解决跨域问题的原理
vue中的proxy主要作用类似于nginx: 将本地请求转发给跟随vue项目启动的本地服务: 然后由服务端去请求远程服务端:因为服务端请求服务端是没有跨域问题的: 而本地服务和本地H5资源,因为同源 ...
vue cli3解决跨域的两种方法
请去下面网站非常清晰:https://www.jianshu.com/p/eb3de95cfc82
Vue--使用webpack解决跨域问题：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
原文网址:Vue--使用webpack解决跨域问题:No 'Access-Control-Allow-Origin' header is present on the requested resour ...
一步步教你前端vue项目开发中如何解决跨域问题
文章目录开发环境中跨域名词解释 1.同源策略: 2.同源: 3.跨域: 4.代理服务器: 解决方式项目背景跨域配置 1.配置说明: A.参数proxy详解: B.pathRewrite详解: ...
vue+Java后端进行调试时如何解决跨域问题
今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的 ...

vue脚手架解决跨域

vue脚手架解决跨域相关推荐

最新文章

热门文章