解决跨域问题的几种方案

 'Access-Control-Allow-Origin'header is present on the requested resource.

什么是跨域资源共享？

CORS（Cross-Origin Resource Sharing，跨域资源共享）由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否组织前端JS代码跨域获取资源。

什么是同源策略？

同源策略指的是：协议+域名+端口三者皆相同，可以视为在同一个域，否则为不同域。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

那什么是跨域？例如http://a.cn下面的js不能调用http://b.cn中的js,对象或数据(因为http://a.cn和http://b.cn是不同域),所以跨域就出现了。

作用是一个用于隔离潜在恶意文件的重要安全机制。

所限制的跨域交互包括：

• Cookie、LocalStorage、IndexdDB 等存储内容；
• DOM 节点；
• Ajax 请求。

如何解决跨域？

本文主要介绍了vue中配置vue.config.js和在nodejs后台中进行解决跨域问题，而JSONP方案因为仅支持GET请求，就不在这里赘述。

1.在VUE中进行配置解决跨域问题(前端)

vue.config.js中设置如下代码片段

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { // 配置跨域
    '/api':{
        target:`http://www.baidu.com`, //请求后台接口
        changeOrigin:true, // 允许跨域
        pathRewrite:{
            '^/api' : '' // 重写请求
        }
    }
  },
}

创建axios实例，将baseURL设置为  '/api'

const http = axios.create({
  timeout: 5000,
  withCredentials: true,
  BASE_URL: '/api'                    //这里设置为api
}

2.通过后台配置CORS解决跨域问题

cors是express的一个第三方中间件。通过安装和配置cors中间件，可以很方便的解决跨域问题。

①安装cors中间件

$ npm install cors

②在主js文件中，导入中间件

const cors = require('cors')

③在路由之前调用，并配置中间件

app.use(cors())