Vue项目解决跨域
1.跨域是什么跨域本质是浏览器基于同源策略的一种安全手段同源策略是一种约定他是浏览器最核心也最基本的安全功能所谓同源即指在同一个域具有以下三个相同点协议相同主机相同端口相同反之非同源请求也就是协议、端口、主机其中一项不相同的时候这时候就会产生跨域2.如何解决解决跨域的方法有很多下面列举了三种JSINPCORSProxy而在Vue中我们主要针对CORS和Proxy这两种方案进行展开1.CORSCross‑Origin Resource Sharing跨域资源共享是一个系统它由一系列传输的 HTTP 头组成这些 HTTP 头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应CORS 实现起来非常方便只需要增加一些 HTTP 头让服务器能声明允许的访问来源 只要后端实现了 CORS 就实现了跨域2.Proxy也称网络代理是一种特殊的网络服务允许一个一般为客户端通过这个服务与另一个网络终端一般为服务器进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全防止攻击方案一如果是通过vue-cli脚手架工具搭建项目我们可以通过webpack为我们起一个本地服务器作为请求的代理对象通过该服务器转发请求至目标服务器得到结果再转发给前端但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域在vue.config.js文件新增以下代码amodule.exports { devServer: { host: 127.0.0.1, port: 8084, open: true, // vue项目启动时自动打开浏览器 proxy: { /api: { // api 是代理标识用于告诉node,url前面是/api的就是使用代理的 traget: http://xxx.xxx.xx.xx:8080, // 目标地址一般是指后台服务器地址 changeOrigin: true, // 是否跨域 pathRewrite: { // pathRewrite 的作用是把实际Request Url中的/api用代替 ^/api: } } } } }通过axios发送请求中配置请求的根路径axios.defaults.baseURL /api方案二可通过服务端实现代理请求转发以express框架为例var express require(express); const proxy require(http-proxy-middleware) const app express() app.use(express.static(_dirname /)) app.use(/api,proxy({target: http://localhost:4000,changeOrigin: false})) module.export app方案三通过配置nginx实现代理server { listen 80; # server_name www.josephxia.com; localtion / { root /var/www/html; index index.html index.htm; try_files $uri $uri/ index.html; } localtion /api { proxy_pass http://127.0.0.1:3000; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }
