Vue+nginx 实现跨域访问

1、跨域和同源策略

什么是同源策略？

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

本域指的是什么？

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

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

　同端口：例如8080端口

一个示例：

Vue+nginx 实现跨域访问

跨域解决方案：

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跨域提示：

Vue+nginx 实现跨域访问

当使用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();

    }

});

node.js设置允许跨域