Vuecli3+express实现跨域

阳光穿透心脏的1/2处 2021-07-25 17:22 656阅读 0赞

**目录**

一，本地跨域

二，线上跨域

--------------------

# 一，本地跨域  #

首先，本地服务器地址开放的是3000端口，云服务器上开发的是4000端口，项目线上访问端口为9899，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

由于本地项目默认为8080端口，所以访问本地项目地址为：[http://localhost:8080][http_localhost_8080]

这里线上开放的项目访问端口是9899，云服务器公网ip为：120.76.197.111，因此线上项目访问地址为：[http://120.76.197.111:9899][http_120.76.197.111_9899]

在根目录（和package.json同级）下创建vue.config.js，内容如下

vue.config.js

module.exports = {
        devServer: {
            proxy: {
                '/api': {
                    target: 'http://localhost:3000', //本地服务器地址开放的是3000端口
                    changeOrigin: true, //這裡true表示实现跨域
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            }
        }
    }

这里是封装的axios.js

import axios from 'axios'
    import qs from 'qs'
    
    axios.defaults.timeout = 1000 * 60 * 2 //最长加载2分钟
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'
    
    //请求拦截器
    axios.interceptors.request.use(
        config => {
            return config
        },
        error => {
            return Promise.reject(error)
        }
    )
    //响应拦截器即异常处理
    axios.interceptors.response.use(response => {
        return response
    }, err => {
        console.log('err1', err)
        return Promise.resolve(err.response)
    })
    
    export default {
        get(url, params = {}) {
            return new Promise((resolve, reject) => {
                axios.get(url, {
                    params: params
                }).then(res => {
                    resolve(res)
                }).catch(err => {
                    reject(err)
                })
            })
        },
    
        post(url, params = {}) {
            return new Promise((resolve, reject) => {
                axios.post(url, qs.stringify(params))
                    .then(response => {
                        resolve(response)
                    }).catch(err => {
                        reject(err)
                    })
            })
        }
    }

![20200825130924491.png][]

express里面的app.js

var cors = require('cors');
    app.use(cors());

注意：cors跨域放在路由（/user）之前

![20200829140331488.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

如果要引入天气接口，解决跨域如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]![20200825143645253.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

天气接口网站:[https://www.tianqiapi.com][https_www.tianqiapi.com]（有访问次数限制）

# 二，线上跨域 #

当本地跨域处理好后，将打包生成的dist文件夹上传到云服务器中，会发现先生依然会跨域。

解决方法很简单，就是使用nginx

首先要在云服务器中安装nginx，具体的安装百度有很多，这里主要就说一下跨域的问题

![20200829140825132.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]

注意：这里的proxy\_pass后面为线上服务器地址

server {
    
            listen 9899;
            server_name  120.76.197.111;
            include /etc/nginx/default.d/*.conf;
    
            location / {
              root /opt/NKYYGS/dist/;
                            index index.html index.htm;     #默认访问路径
                    try_files $uri $uri/ /index.html;
    
            }
             location /api {
                    rewrite  ^.+api/?(.*)$ /$1 break;
                   proxy_pass http://120.76.197.111:4000;
    
            }
    
            error_page 404 /404.html;
                location = /40x.html {
            }
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/8aebb00c4de4499e996b771aa463fa61.png
[http_localhost_8080]: http://localhost:8080/baseMap
[http_120.76.197.111_9899]: http://120.76.197.111:9899/
[20200825130924491.png]: /images/20210725/8723583875ba468da7481ddb85c23823.png
[20200829140331488.png]: /images/20210725/9a687832c894482c94931715d3ad5fbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/bdef6dd8eec644a4b038b91adafb12ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200825143602248.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20200825143645253.png]: /images/20210725/04437157488b42d796e7b61915ae02a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/4caade57c0bd41f6ba3bd5a7e19d23d2.png
[https_www.tianqiapi.com]: https://www.tianqiapi.com
[20200829140825132.png]: /images/20210725/36d2a925540a41cebf11789f5b76bf1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: /images/20210725/292874e797ef4442a9d619f6b307555d.png