vue+nginx设置跨域

vue项目中的配置

以vue-cli搭建的项目为例, 在配置文件 //index.js, 由于我们是在开发环境下使用，自然而然是要配置在dev里面,找到 属性,配置如下:

dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {//使用proxyTable进行跨域设置'/api': { //使用"/api"来代替"https://www.easy-mock.com/mock/5d4b7d772b863e1413ad66ab/iVP/" target: 'https://www.easy-mock.com/mock/5d4b7d772b863e1413ad66ab/iVP/', //源地址 ，注意‘/’是否对应changeOrigin: true, //改变源，是否跨域pathRewrite: {// 这里理解成用'/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 // 比如我要调用'http://www.abc.com/user/add'，直接写'/api/user/add'即可''^/api': '' //路径重写，也可以写成 '^/api': 'https://www.easy-mock.com/mock/5d4b7d772b863e1413ad66ab/iVP/'}}},

上面属性中的配置,效果就是将本地8080端口的一个请求代理到了这个域名下

'http://localhost:8080/api' ===> 'https://www.easy-mock.com/mock/5d4b7d772b863e1413ad66ab/iVP/'

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

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

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

这还没完，现在我们要将项目部署到nginx上，此时原来可以访问的接口又访问不到了，所以这个时候还要对nginx进行设置。

下载安装自行百度~~~

下载完成后目录：

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

在nginx根目下启动nginx.exe,如果出现一个黑窗口一闪而过,说明启动成功,访问:80出现此页面则访问成功，如果访问不成功有可能是端口被占用,修改上面的端口号,重启nginx即可, 浏览器访问:XXXX；我因为8080端口被占，后面改成了8000端口！

推荐使用命令行操作nginx：

start nginx  //启动
nginx -s stop // stop是快速停止nginx，可能并不保存相关信息
nginx -s quit // quit是完整有序的停止nginx，并保存相关信息
nginx -s reload // 当配置信息修改，需要重新载入这些配置时使用此命令
nginx -s reopen // 重新打开日志文件
nginx -v // 查看Nginx版本

Vue项目部署在nginx上的配置

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

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

build文件下的untils文件中找到vue-style-loader
增加 publicPath: '../../'

此时打包后的dist文件可以不放置服务器环境下访问, 直接打开dist文件目录下的index.html就可以打开访问，但是

这时候的静态资源都可以被加载出来,且不会报错,但是api访问的话还是会报错！！！

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

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

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

	location /api/ {			proxy_pass https://www.easy-mock.com/mock/5d4b7d772b863e1413ad66ab/iVP/;			}

你要访问那个地址这里就修改为你要访问的那个地址

以上配置就完成了，注意: 修改完nginx中的配置一定要重启nginx才可以, 切记!!!