WebPack 4.x 跨域问题的解决

WebPack 4.x 跨域问题的解决

需要使用 vue 框架创建项目，我使用 webpack 创建了一个 vue 项目，创建命令如下：

vue init webpack co-mission

因为需要前后端分离，在测试前后端接口的时候，发现如下问题：

Access to XMLHttpRequest at ‘http://localhost:8000/user’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

截图如下：

带着问题上网找答案，说是出现了跨域问题，具体什么是跨域，请自行搜索。

要解决这个问题，可以从前端或者后端入手。
我使用的后端是 Django ，可以参考 这篇文章 来配置。但是我在配置完成之后，虽然后端能够获取到前端发来的请求，但是前端依然无法处理，还是出现这个问题，于是我放弃了在后端解决这个问题的念头。

要是不想听我说太多，可以直接跳转到解决位置。

继续上网找前端跨域的答案。

一开始找到的说是配置 vue.config.js 文件，在里面配置 proxy，但是试过才知道，在前端项目启动的时候，根本就没有碰过这个文件，因为在使用 npm run dev 时都不能检测出我故意设置的这个文件的语法错误；由于这是上课的项目，朋友做的项目跟我的一样，在跟朋友讨论了之后才发现，这个文件是 vue CLI 脚手架创建的项目才会读取，于是我便尝试用脚手架创建一个项目，以此来测试能不能解决跨域问题；但是我并没有成功，因为这期间出现了其它问题，这里就不再赘述了。

后来想了想，搜索了关键词 webpack django ，我觉得肯定有人已经解决了他们之间的跨域问题，出来的第一篇文章就解决了我的问题，这篇文章就是我解决这个问题的源头。

通过查看文章前面的几个链接，我了解了packet.json文件的具体内容，也了解了 webpack.config.js 文件，发现自己之前竟然是命名出错了（泪目( Ĭ ^ Ĭ )），然后我便开始编写 webpack.config.js 文件，但是我发现在我运行 npm run dev 时并没有调用到这个文件（同样的，还是连这个文件的语法错误都不能检测到），而只能在运行 webpack 时才能检测到并调用，但使用这个命令并不能正确启动我的项目，所以这还是不能解决问题。

后来，我发现，在使用 npm run dev 启动的时候，调用的配置文件并不会调用到 webpack.config.js 文件，而是调用了项目配置里面指定的配置文件：

于是我便通过这个文件，找到了 proxy 对象的值指向的是 config 包里面的 proxyTable 对象，于是，我把跨域的信息写到了这个对象中，关掉了后端的跨域，结果：

跨域成功了！！！

问题解决！！！

下面附上详细的解决方案。

解决

运行时发现配置文件：

打开 bulid/webpack.dev.conf.js 文件查看：

发现 proxy 的内容调用了 config 包的一个变量，找到 config 包的 index.js 文件，修改 proxyTable 成如下内容：

这里配置在访问 /api 开头的资源时，默认跳转到 target 的网址中，并且把 /api 替换成空，也就是访问 target 网站资源时去掉 /api 目录。其中proxyTable 的内容，可以参照直接在 vue.config.js 或者 webpack.config.js 文件中的跨域配置进行设置。

在使用 axios 或者其他插件访问网络时，设置访问的基地址为 /api即可。

参考文献：

vue+django+webpack搭建

这篇文章是解决问题的源头

ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in XXX的一个解决方案

我从此文章中获知 webpack 4.x 可以不使用配置文件配置 webpack

vue 跨域 和django跨域

这篇文章介绍了 vue 跨域和 Django 的跨域的方法