Vue中的跨域设置方法和nginx的打包部署

众所周知，我们在做前端分离项目的时候，往往需要在本地启动前端项目。接口想要获取服务器的实际数据，而不是本地模拟数据。如果本地程序直接访问远程接口，肯定会遇到跨域的问题。

什么是跨域？如何实现跨域？

这里就不详细介绍了，大家自行百度一下

为什么要实现前端跨域

一般来说，大公司允许前后端分离的项目通过后台设置跨域访问，因为后台设置允许跨域非常简单方便。但是有些情况下，一些小公司或者你工作的地方在后台配合不好，这就需要前端配置跨域请求，方便我们使用接口。

vue项目中的配置

以vue-cli构建的项目为例，在webpack配置文件/config/index.js中，由于我们在开发环境中使用它，自然要在dev中进行配置，找到proxyTable属性。配置如下：

dev: { //路径assetsSubDirectory: ' static '，assetpublipath : '/'，-使用proxyTable进行跨域设置-proxy table : { '/API ' : { target : ' http://www . ABC.com '，//设置你调用的接口域名和端口号，别忘了添加http changeOrigin: true。//是否跨域path rewrite 3360 {//这里理解为用“/api”代替target中的地址，我们在下面的组件中去掉接口的时候直接用api。//比如我想直接调用‘http://www.abc.com/user/add'. Write’/API/user/add’/API' :'/'}}，//各种dev服务器设置host :' 0.0.0 '，//可以被process.env.HOST port: 8080覆盖，//可以被process.env.PORT覆盖，如果port正在使用，将确定一个空闲的autoOpenBrowser: false，errorOverlay: true，notifyOnErrors: true，poll: false，//3https://web pack . js 上面proxyTable属性中的配置具有将请求从本地8080端口代理到域名http://www.abc.com的效果

http://localhost :8080/API '===' http://www。abc.com/'Note认为：以上的设置只能在开发环境下使用，而且打包后会出现路径问题。请注意， Vue-cli提供的代理函数只供您在开发环境中使用。它(http-server-中间件)依赖于节点环境，生产代码应该使用npm run build，然后将dist放在nginx服务器上，在nginx上配置代理地址Vue项目，并将其部署到nginx上的跨域设置中。

这还不是全部。现在要把项目部署到nginx，这个时候可以访问的接口不能访问，所以这个时候要设置nginx。

Windows系统下载nginx下载地址： nginx.org/en/docs/win…

选择下载进入下载版本页面

在这里选择稳定版本

下载就好

下载后，目录如下

进入丛文件，打开nginx.congf文件，在server对象中找到listen属性，检查监视器的端口号(默认端口80)

启动nginx根目录下的nginx。如果黑色窗口闪烁，表示启动成功。访问localhost:80，出现此页面，访问成功。

如果访问不成功，端口可能会被占用。修改以上端口号，重新启动nginx。浏览器访问部署在nginx上的localhost:XXXX Vue项目的配置。vue项目运行npm运行构建来打包项目。请记住，需要本地静态资源文件，这需要webpack配置，如下面的3360所示

生成属性assets publicath : '/'=assets publicath : '。在配置文件下的index.js文件中找到“/”

在生成文件下的untils文件中找到Vue样式的加载程序，添加了publicPath: '././'

此时，可以在不放置服务器环境的情况下访问打包的dist文件，并且可以直接打开dist文件目录下的index.html进行访问

此时，可以加载静态资源，并且不会报告任何错误，但是api仍然会报告错误

将打包的dist文件的内容复制到nginx文件中的html文件

打开html文件，清空其内容，并将复制的内容粘贴到其中

进入丛文件，

打开nginx.congf文件，找到服务器属性并在其中添加一个配置

location/API { proxy _ pass http://localhost :4000/；}

如果您想访问该地址，请在此处进行修改，并复制您想访问的地址的代码

以上配置全部完成

注意：在nginx中修改配置后必须重启nginx，切记！

Nginx简单操作命令

Nginx.exe-sstop//stop是Nginx的快速停止，可能不会保存相关信息。nginx.exe-squet//quit是nginx完整有序的停止，保存相关信息。nginx . exe-sre load//修改配置信息后，需要重新加载这些配置时，请使用此命令。Nginx.exe-s重新打开//重新打开日志文件Nginx -v //检查nginx版本。以上是我在项目中使用的配置，还有一些比较高级的配置没有使用，供大家参考

摘要

以上是边肖介绍的Vue跨域设置方法和到nginx的包部署。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！