Vue中级指南-04 Vue中跨域以及打包部署到nginx跨域设置

前言

众所周知,咱们在作先后端分离项目的时候,常常须要在本地起前端工程,接口但愿拉取服务端的实际数据而不是本地的mock数据,而若是本地程序直接访问远程接口， 确定会遇到跨域问题。

什么是跨域?实现跨域的多种方式?

这里我就不详细介绍了,你们自行百度哈

为何要实现前端跨域

通常来说,先后端分离的项目在大公司都会由后台设置容许跨域访问,由于后台设置容许跨域是很简单和方便的,可是某些状况下,一些小公司或者你工做的场所后台不怎么配合的状况下,这就须要前端来配置跨域请求来方便咱们使用接口

vue项目中的配置

以vue-cli搭建的项目为例, 在webpack配置文件 /config/index.js, 因为咱们是在开发环境下使用，天然而然是要配置在dev里面,找到 proxyTable属性,配置以下:

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    <!-- 使用proxyTable进行跨域设置 -->
    proxyTable: {
        '/api': {
          target: 'http://www.abc.com',  // 设置你调用的接口域名和端口号, 别忘了加http
          changeOrigin: true,  // 是否跨域
          pathRewrite: {
              // 这里理解成用'/api'代替target里面的地址，后面组件中咱们掉接口时直接用api代替 
              // 好比我要调用'http://www.abc.com/user/add'，直接写'/api/user/add'便可' '^/api': '/' } } }, // Various Dev Server settings host: '0.0.0.0', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- /** * Source Maps */ // https://webpack.js.org/configuration/devtool/#development devtool: 'cheap-module-eval-source-map', // If you have problems debugging vue-files in devtools, // set this to false - it *may* help // https://vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true, cssSourceMap: true }, 复制代码

上面proxyTable属性中的配置,效果就是将本地8080端口的一个请求代理到了http://www.abc.com这个域名下

'http://localhost:8080/api' ===> 'http://www.abc.com/'
复制代码

注意: 以上设置只能在开发环境下使用,打包后会出现路径问题的

注意: Vue-cli提供的代理功能，只是让你在开发环境下使用的，它(http-server-middleware)依赖于node环境，生产代码应该使用npm run build而后把dist放到nginx服务器上，在nginx上配置代理地址

Vue项目部署到nginx上的跨域设置

这还没完，如今咱们要将项目部署到nginx上，此时原来能够访问的接口又访问不到了，因此这个时候还要对nginx进行设置。

windows系统下载nginx

• 下载地址: nginx.org/en/docs/win…

  

• 选择download进去选择下载版本页面

• 这里选择稳定版下载便可

• 下载完成后目录以下

• 进入cong文件,打开nginx.congf文件,找到server对象里面的listen属性查看查看监听的端口号(默认80端口)

• 在nginx根目下启动nginx.exe,若是出现一个黑窗口一闪而过,说明启动成功,访问localhost:80出现此页面则访问成功

• 若是访问不成功有多是端口被占用,修改上面的端口号,重启nginx便可, 浏览器访问localhost:XXXX

Vue项目部署在nginx上的配置

• vue项目运行 npm run build 进行项目打包记得有本地静态资源文件的须要须要webpack配置, 以下:

config文件下的index.js文件找到build属性
assetsPublicPath: '/'   =>>>>>   assetsPublicPath: './' 
复制代码

build文件下的untils文件中找到vue-style-loader
增长 publicPath: '../../'
复制代码

• 此时打包后的dist文件能够不放置服务器环境下访问, 直接打开dist文件目录下的index.html就能够打开访问

这时候的静态资源均可以被加载出来,且不会报错,可是api访问的话仍是会报错
复制代码

• 将打包后的dist文件里面的内容复制一份到nginx文件中的html文件中

打开html文件清空里面的内容,将复制的内容粘贴进去
复制代码

• 进入cong文件,打开nginx.congf文件,找到server属性在里面新增一条配置

location /api {			
		proxy_pass http://localhost:4000/;			
	}
复制代码

你要访问那个地址这里就修改成你要访问的那个地址
复制代码

• 以上配置就所有完成啦

注意: 修改完nginx中的配置必定要重启nginx才能够, 切记!!!

nginx简单的操做命令

nginx.exe -s stop // stop是快速中止nginx，可能并不保存相关信息
nginx.exe -s quit // quit是完整有序的中止nginx，并保存相关信息
nginx.exe -s reload // 当配置信息修改，须要从新载入这些配置时使用此命令
nginx.exe -s reopen // 从新打开日志文件
nginx -v // 查看Nginx版本
复制代码

以上就是我在项目中使用的配置啦,还有一些更高级的配置尚未接触使用到,供你们参考