单机下Vue项目通过Nginx配置反向代理(2)

跨域问题

====================================================================

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

开发模式下

---

前端向后端请求数据时，需要解决跨域问题。

具体做法是在和src同级的地方新建一个 JavaScript文件，vue.config.js。

下面配置以下内容。

然后,前端使用axios请求的时候，形如'/api/login'

其中 /api被替换掉，最终请求的地址就是 http://localhost:8899/login。

module.exports={

devServer:{

proxy:{

“/api”:{

target:‘http://localhost:8899’,//访问的服务器地址

changeOrigin:true,//true为开启代理

//secure: true, // 如果是https接口，需要配置这个参数

pathRewrite:{

‘^/api’: ‘’//路径的替换规则

/*

*这里的配置是正则表达式，以/api开头的路径将会被‘'替换掉

*假如后台文档的接口是 “https://www.cyclv.com/admin/login”

*前端调取API接口应写：axios.get(‘/api/admin/login’)

*/

}

}

}

}

}

项目部署时

---

1. 打包项目： npm run build

2. 项目就多了一个文件夹：dist

但是部署的时候需要使用nginx做反向代理，因为开发的时候我们使用的是webpack提供的proxyTable做的代理从而解决了开发环境的跨域请求问题。

webpack实现代理请求的原理

用vim修改配置文件

==========================================================================

具体文件位置就要看安装在哪。

vim /usr/local/etc/nginx/nginx.conf

之后会出现这样的内容。

#user nobody;

worker_processes 1;

#error_log logs/error.log;

#error_log logs/error.log notice;

#error_log logs/error.log info;

#pid logs/nginx.pid;

events {

worker_connections 1024;

}

http {

include mime.types;

default_type application/octet-stream;

#log_format main '$remote_addr - $remot{e}_{u}ser[$time_local] “$request” ’

'$status b o d y b y t