Vue调试时遇到浏览CORS问题处理及思路

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

Vue是许多前端开发小伙伴使用的开发前端框架，在调试前端代码时，会经常遇到调用网站接口。如果网站接口在调用时遇到浏览器同源策略，导致本地测试时调用服务器端接口时报错，有的即使获取当有接口，由于浏览器CORS导致cookie无法更新，而不能顺利调试程序。当前作者在调试公司项目时就遇到了此类问题。在此记录解决过程，以方便后面遇到此问题的同学借鉴。

---

一、CORS是什么？

CORS（Cross-Origin Resource Sharing）是一种用于解决跨域资源访问限制的机制。当一个网页从与自己所在的域名不同的域名向服务器发起请求时，就会涉及到跨域问题。CORS 允许服务器在响应中设置 HTTP 头部，以便客户端能够访问来自不同域的资源。

通常，浏览器实施了同源策略，即默认情况下，不允许通过 JavaScript 发起跨域请求。CORS 机制通过在服务器端设置响应头来允许跨域请求，从而使得客户端可以安全地与不同源的服务器进行交互。

二、遇到此问题的前端表现和解决方式

1.解决localhost访问在线接口由CORS原因无法访问的问题

由于本地测试是用nodejs提供web服务。所以解决思路是使用代理的方式，在服务器端去请求接口。处理方式如下
1） 使用 http-proxy 模块：http-proxy 是一个常用的 Node.js 模块，用于创建 HTTP 和 HTTPS 代理服务器。你可以使用它来创建反向代理、负载均衡等功能。下面是一个简单的示例代码：
代码如下（示例）：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

// 创建代理中间件
proxyTable: {
'/goodsSite/userDiy/sdkSaveDiyGoodsAndAddShopCart' : {
      target: 'https://xxx.xxxxx.com',
      changeOrigin: true,
      pathRewrite: {
        '^/goodsSite/userDiy/sdkSaveDiyGoodsAndAddShopCart': '/goodsSite/userDiy/sdkSaveDiyGoodsAndAddShopCart'
       }
      },
      '/memberSite/members/smsdynamic' : {
        target: 'https://xxxx.xxxxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/memberSite/members/smsdynamic': '/memberSite/members/smsdynamic'
         }
        }
 }

// 使用代理中间件
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

// 其他路由和中间件...

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

使用这种方式，可以在nodejs服务器端代替前端取接口
但是注意前端需要直接用http://localhost:8889//memberSite/members/smsdynamic,调用，代理才会起作用。

2.解决可以访问接口，但接口在返回信息时，带有头部信息，指明前端哪个网站有权限写cookies。导致前端不能正确写cookies,调试时出现如下错误

在不能修改服务器接口的情况下。笔者主要的解决思路是把测试端的域名跟服务器接口端主域名一致，并确保都是在同一http或者https下。才能确保不会再触发浏览器同源策略，而保证Cookes可以正确写入本地，并继续向下调试程序。
因为笔者在前端开发时，主要是在nodejs服务下，所以主要解决以nodejs下的CORS问题

1）解决域名一致性问题。
笔者用的是Mac电脑，所以以Mac电脑为例。
修改本地域名指向：

#使用sudo，因为hosts修改需要root权限
sudo vi /etc/hosts 

按Insert键进入编辑状态并添加跟接口一样的域二级域名，可以是localhost.xxxx.com

编辑完成后按ESC键关闭insert状态，并按:wq保存退出vi
保存后，刷新本地DNS,Mac下用如下命令
dscacheutil -flushcache，如果Windows下用ipconfig /flushdns

在nodejs中设置指定的域名

var uri = 'http://xxx.xxxxx.com:' + port

确保上面域名跟hosts中的一致。启动服务后可以显示

2）如果接口是https的还必须要，让本地测试环境的域名使用https.nodes，主要配置如下

代码如下（示例）：
引用组件

var https =require('https')
var fs = require('fs')

引入https 配置文件

var options = {
   key: fs.readFileSync('/Users/admin/Desktop/cros/xxx.xxx.com.key'),
   cert: fs.readFileSync('/Users/admin/Desktop/cros/xxxx.xxx.com.pem')
}

如果没有https配置文件，可以到阿里云获取免费的域名证书，或者到某宝购买一个。
用如下方式启用服务

var server = https.createServer(options, app).listen(port, function () {
  console.log('> Starting dev server...');
  devMiddleware.waitUntilValid(() => {
    console.log('> Listening at ' + uri + '\n');
    // when env is testing, don't need open it
    if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
      opn(uri);
    }
    _resolve();
  });
});

---

总结

经以上处理后，可以解决由于浏览器同源策略导致的本地调试问题。