Vue项目解决跨域

1.跨域是什么

跨域本质是浏览器基于同源策略的一种安全手段

同源策略，是一种约定，他是浏览器最核心也最基本的安全功能

所谓同源（即指在同一个域）具有以下三个相同点

协议相同
主机相同
端口相同

反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域

2.如何解决

解决跨域的方法有很多，下面列举了三种：

JSINP
CORS
Proxy

而在Vue中，我们主要针对CORS和Proxy这两种方案进行展开

1.CORS（Cross‑Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的 HTTP 头组成，这些 HTTP 头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应

CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源只要后端实现了 CORS ，就实现了跨域

2.Proxy也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全，防止攻击

方案一

如果是通过vue-cli脚手架工具搭建项目，我们可以通过webpack为我们起一个本地服务器作为请求的代理对象

通过该服务器转发请求至目标服务器，得到结果再转发给前端，但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域

在vue.config.js文件，新增以下代码

javascript 复制代码

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发送请求中，配置请求的根路径

javascript 复制代码

axios.defaults.baseURL = '/api'

方案二

可通过服务端实现代理请求转发

以express框架为例

javascript 复制代码

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实现代理

javascript 复制代码

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;
    }
}