Vue+nginx 实现跨域访问

1、跨域和同源策略

什么是同源策略？           

同源策略是指浏览器处于安全考虑的情况下，只允许本域下的借口进行交互。不同源的客户端在没有授权的情况下是不允许获取对方资源的。

本域指的是什么？

    同协议：例如相同的http或https

    同域名：例如https://baidu.com/aaa 和 https://baidu.com/bbb

　 同端口：例如8080端口

一个示例：

跨域解决方案：

    JSONP

    CORS

    nginx反向代理

    降域

    postMessage

 

JSONP：最早的解决方案，利用script标签可以跨域的原理实现，只支持get请求

CORS：同源策略

优势：

    在服务端进行控制是否允许跨域，可自定义规则

    支持各种请求方式

缺点：

    会产生额外的请求

阮一峰对CORS的解析：http://www.ruanyifeng.com/blog/2016/04/cors.html

 

nginx反向代理

思路是：利用nginx反向代理把跨域为不跨域，支持各种请求方式

缺点：需要在nginx进行额外配置，语义不清晰

 

降域和postMessage:

https://www.jianshu.com/p/7666e1ffb8c6

 

当没api接口遇到跨域问题时，会报XMLHttpRequest跨域提示：

 

当使用CORS策略，解决跨域问题时，我的做法是在服务端设置允许访问的接口地址：

app.use(async (ctx, next) => {

    //添加允许请求头

    // ctx.append('Access-Control-Allow-Origin', '*')

    // ctx.append('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild')

    // ctx.append('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS,PATCH')

    // //ctx.append('Content-Type', 'application/json;charset=utf-8')

    // console.log(`Process ${ctx.request.method} ${ctx.request.url}...`);

    // logger.info(`Process ${ctx.request.method} ${ctx.request.url}...`)

    //http 预请求处理(post/put/delete 请求在正式请求之前会先发送一个OPTIONS的预请求，只需要把这个OPTIONS的预请求正常返回，后续的请求就会正常执行)

 

    if (ctx.request.method === 'OPTIONS') {

        ctx.body = "OK"

    } else {

        //继续执行api请求

        await next();

    }

});

 

因为项目中使用的是vue+node.js实现，而vue自身可以设置proxy实现跨域，所以最终采用vue proxy+nginx反向代理，实现跨域

 

2、Vue 设置代理实现本地跨域

当前项目使用vue-cli3.0版本构建

首先在根目录下创建vue.config.js文件，这个配置文件会在运行项目的时候自动加载

module.exports = {

    runtimeCompiler: true,

    publicPath: '/', // 设置打包文件相对路径

    devServer: {

        open: process.platform === 'darwin',

        host: '127.0.0.1',

        port: 3000,

        // open: true, //配置自动启动浏览器

        proxy: {

            '/api': {

                // target: process.env.VUE_APP_BASE_URL, //对应自己的接口

                target: 'http://www.xxx.com', //对应自己的接口

                changeOrigin: true,

                ws: true,

                pathRewrite: {

                    '^/api': ''

                }

            }

        }

    },

}

解释：

proxy对象标识，对/api 开头的接口实现代理

       target：’’,代理的接口地址，

       changeOrigin:true,是否跨域

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

       pathRewrite:{},//重写api路径，因为原来接口中不存在’/api’，我们人为加上去就是为了标识哪些接口需要实现代理，但是真正访问接口的时候还是要把接口uri中的‘/api’替换为‘’

 

我们不仅可以为’/api’实现代理，也可以为其他具有同类功能的接口实现代理，比如我们的接口是发布在多个微服务中的，就需要我们设置多个代理地址，

这时，就不能对axios设置统一的baseURL

//axios.defaults.baseURL = ‘’

 

在使用axios请求接口的时候，如果需要跨域，则在请求接口前加载‘/api’，例如：

const server=’/api’

const uri=server+’/ patient_survey/findByPage’

axios.post(uri).then(res=>{})

 

配置完成之后本地就可以跨域访问了，

通过浏览器F12查看请求地址为：

 

但是实际的接口请求地址为：devServer.proxy.target中的地址

所以实际请求的uri为：http:www.xxx.com/patient_survey/findByPage

 

3、vue+nginx实现服务端跨域

但是把vue项目打包发布之后，调用接口会提示404错误，这时还需要在nginx中做一下反向代理

在服务器中找到nginx的配置文件nginx.config

在需要添加反向代理的配置项中添加如下：

location /api {

                rewrite ^.+api/?(.*)$ /$1 break; //可选参数，正则验证地址

                include uwsgi_params; //可选参数，uwsgi是服务器和服务端应用程序的通信协议，规定了怎么把请求转发给应用程序和返回

                proxy_pass http://www.xxx.com;// 此处修改为自己的请求地址，必填

        }

  server {

        listen 80;

        server_name xxx.com;

        charset utf8;

 

        location / {

                root /data/release/xxx;

                index index.html;

                proxy_pass http://127.0.0.1:8003;

                }

 

             location /api {

                rewrite ^.+api/?(.*)$ /$1 break;

                include uwsgi_params;

                proxy_pass http://www.xxx.com;

        }

 

 

        error_page 404 /404.html;

                location = /40x.html {

        }

        error_page 500 502 503 504 /50x.html;

                location = /50x.html {

        }

}

设置完成后 重启nginx

• nginx –s reload

完成后服务器应该也能实现跨域

参考：

https://www.cnblogs.com/zhaohongcheng/p/11250161.html

 

4、vue配置环境变量

在实现vue的跨域访问之后，为了方便本机调试和发布，可以在vue中设置不同的环境变量，使项目在不同的环境中自动调用不同的接口地址

 

需要文件：

在vue项目根目录下创建三个文件

 .env 无论开发环境还是生成环境都会加载

 .env.development 开发环境加载这个文件

 .env.production 生成环境加载这个文件

如果需要其他环境，可以继续添加其他环境的配置文件

.env 文件内容：

　　　　NODE_ENV = production

.env.development 文件内容：

　　　　NODE_ENV = development

　　　　VUE_APP_BASE_URL = http://localhost:3000/

.env.production 文件内容：

　　　　NODE_ENV = production

　　　　VUE_APP_BASE_URL = http://www.xxx.com/

（其中’VUE_APP_’是固定前缀，不可以更改）

文件加载顺序：

首先加载.env文件，判断当前的项目环境，

如果是开始环境，则继续加载.env.development的内容，

如果是生产环境，则加载.env.production的内容,

ps：测试发现，当前的系统环境并不是.env文件中的NODE_ENV =xxx 确定的，而是根据实际情况决定，

如在ide中使用npm run serve调试，则加载的是.env.development文件

如果执行npm run build 之后发布到服务器，则加载的是.env.production文件

pageage.json的scripts部分如下

"scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint"

  },

在项目main.js文件可以打开查看当前的系统变量：

console.log('process.env',process.env)

设置完之后，在开始的vue.config.js代理文件中，将target指向改为： process.env.VUE_APP_BASE_URL

之后，vue会根据执行环境的不同自动加载相应的接口地址