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

等等之类的都是跨域问题报错，接下来看看如何办理：
起首看main.js文件：

在main.js文件中添加：

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

复制代码

接下来再看vue.config.js文件，没有就本身创建一个，但是一样平常都会有，名字不能错

其重要添加devServer如下：

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

复制代码

添加后效果如下： 
 

 其原理大抵就是我刚刚添加了Axios.defaults.baseURL = '/api'，其每次发送请求都会加一个/api的前缀，这里拦截器拦截api前缀后将其替换为 target。
接下来看axios请求：这里随意写了一个钩子函数：

看看效果jke

可以看到请求乐成，没有跨域报错了。 前端之路学习慢慢，之后继续分享实际工作中碰到的问题以及办理方案，觉得有用就点个赞！！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。