前端跨域案例

「爱情、让人受尽委屈。」 2023-01-05 12:09 169阅读 0赞

# [vue解决跨域方法][vue] #

### 什么是跨域 ###

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子：

#协议跨域
    http://a.baidu.com访问https://a.baidu.com；
    #端口跨域
    http://a.baidu.com:8080访问http://a.baidu.com:80；
    #域名跨域
    http://a.baidu.com访问http://b.baidu.com；

现在很多公司都是采用前后分离的方式开发。那么出现经常和会跨域打交道。我这里整理日常开发中解决跨域的几种方案。我们前端使用的Vue，后端使用的NodeJs。

### 解决方案 ###

proxyTable

这里vue脚手架生成的标准项目为准。一般在项目config目录下面有个index文件。里面格式如下：

'use strict'
    const path = require('path')
    module.exports = {
        dev: {
            // Paths
            assetsSubDirectory: 'static',
            assetsPublicPath: '/',
            proxyTable: {
                '/api': {
                    target: 'http://localhost:7001',//后端接口地址
                    changeOrigin: true,//是否允许跨越
                    pathRewrite: {
                        '^/api': '/api',//重写,
                    }
                }
            },
            host: '192.168.0.104',
            port: 8081,
            autoOpenBrowser: false,
            errorOverlay: true,
            notifyOnErrors: true,
            poll: false,
            useEslint: true,
            showEslintErrorsInOverlay: false,
            devtool: 'eval-source-map',
            cacheBusting: true,
            cssSourceMap: false,
        },
    
    }

上面配置中，我们根据实际情况只需要修改proxyTable对于配置即可。假设我后端请求地址是http://localhost:7001，所有api的接口url都以/api开头。所以首先需要匹配所有以/api开头的.然后修改target的地址为http://localhost:7001。最后修改pathRewrite地址。将前缀 '^api' 转为 '/api'。如果本身的接口地址就有 '/api' 这种通用前缀，就可以把 pathRewrite 删掉。注意这个方式只能在开发环境中使用。

CORS

CORS即跨源资源共享，它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。但是CORS也具有一定的风险性，比如请求中只能说明来自于一个特定的域但不能验证是否可信，而且也容易被第三方入侵。 这里一般需要后端配合,开启cors。一般各种语言都有类似的包。比如NodeJS的[koa2-cors][]

var koa = require('koa');
    //npm install --save koa2-cors
    var cors = require('koa2-cors');
    var app = koa();
    //开启
    app.use(cors());

这个方式解决的跨越问题支持开发和生产环境。但是有一定的安全性问题。

### Nginx ###

当我们明白跨越的含义之后。只要解决了'源'的问题。那么跨越也就不存在了。这里我们便会想到proxy，同时也会想到Nginx。  
  
我们只需要在部署静态资源配置下面加上红框里面的配置就可以了。同时这个方法支持开发环境和生产环境。

![5608ac69291ba4c87bcd8b7becdc1b9e.png][]

后端程序代理

当然上面2个方法都需要后端的配合和需要修改服务器配置。所有还有一种方法不需要他们配合 ，我们自己就可以做到。就是我们自己启一个后端程序做代理。然后把所有的请求转发到服务器。这里要用到node的一个包[http-proxy-middleware][]。关键代码(express)如下

var express = require('express');
    var proxy = require('http-proxy-middleware');
    
    var app = express();
    
    app.use('/api', proxy({target: 'http://10.119.168.87:4000', changeOrigin: true}));
    app.listen(3000);

用Vue-cli脚手架搭建了个demo,前后分离就有跨域问题的出现。

vue-clie搭建demo步骤（传送门）：https://www.cnblogs.com/wangenbo/p/8487764.html

我自己在网上找了2个接口做测试：

CSDN：https://www.csdn.net/api/articles?type=more&category=home&shown\_offset=1524276761019196&first\_view=false

掘金：https://suggest-follow-api-ms.juejin.im/v1/getByTag?tag=%E5%89%8D%E7%AB%AF&src=web&t=1

安装模块axios进行ajax请求，直接请求，肯定显示跨域，无法请求。

===============    以下为npm run dev 跨域的解决方法    ===============

![f834beac5962fde61b35fcf8f3aec5a0.png][]

脚手架Vue-cli已经帮我们留好了接口

参考这篇文章才知道：https://blog.csdn.net/qq\_31201781/article/details/78778193

在config目录下的index.js文件，有个参数：

proxyTable:\{\}

所以，我把参数添加成：

![9cd3964ef597efdb015ed9a2c74e9bba.png][]

原来接口：

CSDN：https://www.csdn.net/api/articles?type=more&category=home&shown\_offset=1524276761019196&first\_view=false

掘金：https://suggest-follow-api-ms.juejin.im/v1/getByTag?tag=%E5%89%8D%E7%AB%AF&src=web&t=1

请求链接就变成这样了：

![4f9a3ceb9f0ccb73405bb2075c3961ba.png][]

![6eafcf2c2c3d253711b39c6d135e0891.png][]

最后，把数据打印出来，就可以了。。

![d9415aa40d89b74bc4fc851004d5d4ce.png][]

===============    以上为npm run dev 跨域的解决方法    ===============

===============    以下为npm run build 跨域的解决方法    ===============

我们要打包上线：就用npm run build会打包成dist文件

但发到线上，就得用nginx解决跨域。

首先，下载nginx

https://blog.csdn.net/biaoge0310/article/details/78900538

入门命令：

在ngix文件目录下执行以下命令

start nginx　　开启ngix

nginx -s quit　 退出

nginx -s reload 重启

nginx -t 检查配置文件是否成功

然后：进入nginx/conf目录下的，找到nginx.conf文件

添加如下配置：

![5608ac69291ba4c87bcd8b7becdc1b9e.png][]

启动ngix服务器： start nginx

输入网址：http://localhost:8099

完美！！！！打包后也解决了。。

===============    以上为npm run build 跨域的解决方法    ===============

[vue]: https://www.cnblogs.com/wasbg/p/10973880.html
[koa2-cors]: https://www.npmjs.com/package/koa2-cors
[5608ac69291ba4c87bcd8b7becdc1b9e.png]: /images/20221119/3d767f0f5967447e8b088ac80efa3870.png
[http-proxy-middleware]: https://www.npmjs.com/package/http-proxy-middleware
[f834beac5962fde61b35fcf8f3aec5a0.png]: /images/20221119/52fd7f71831744f3817a3c6775461802.png
[9cd3964ef597efdb015ed9a2c74e9bba.png]: /images/20221119/1804c8578fd4437ab0215d024f2da764.png
[4f9a3ceb9f0ccb73405bb2075c3961ba.png]: /images/20221119/b5fca105142b4658ae29d21efe55ed5b.png
[6eafcf2c2c3d253711b39c6d135e0891.png]: /images/20221119/f30ead8dbc894c2585e59b8caa5a6466.png
[d9415aa40d89b74bc4fc851004d5d4ce.png]: https://img-blog.csdnimg.cn/img_convert/d9415aa40d89b74bc4fc851004d5d4ce.png