跨域解决方案之CORS

什么情况表示遇到跨域请求

一般在前后端分离项目中,前端请求接口,浏览器控制台报如下错误

类似 No 'Access-Control-Allow-Origin' header 报错

为什么会有跨域请求

跨域请求产生的原因是:浏览器的同源策略

这是一个用于隔离潜在恶意文件的重要安全机制.一旦请求的资源不是同源那么即是跨域

什么样的请求是跨域请求

判断是否是跨域,本质是判断是否同源.如果两个页面的协议，端口（如果有指定） 和域名都相同，则两个页面具有相同的源

例如:请求页面是:

http://store.company.com/dir/page.html

目标URL	结果	原因
http://store.company.com/dir2/other.html	成功	同源
http://store.company.com/dir/inner/another.html	成功	同源
https://store.company.com/secure.html	失败	不同协议
http://store.company.com:81/dir/etc.html	失败	不同端口
http://news.company.com/dir/other.html	失败	不同域名

如何解决跨域请求问题

Vue 开发环境下跨域问题

使用vue-cli 构建项目,开发环境下解决跨域问题

 // config/index.js
 module.exports = {
     dev: {
        proxyTable: {
            // 代理所有以 api 开头的请求为 http://api.com
            '/api': {
                target: 'http://api.com', // 接口地址
                changeOrigin: true,
                pathRewrite: {
                     '^/api': '' //替换 /api 为 ''
                        }
                  }
            }
      }
}

• 请求url: /api/xxx/ 匹配以/api开头的请求
• 代理后的请求url: http