前端开发/生产环境-解决跨域

比较老的方案是jsonp，本质是利用script标签的跨域请求不会被浏览器拦截，需要后端配合支持cors请求，缺陷就是只能支持get请求。类似的还有img标签。

jsonp的原理是浏览器加载script标签的时候只会当做文件加载，是可以跨域请求资源的，利用这点我们可以给src设置指定的跨域地址发get请求；然后script标签加载后会执行内部的代码，这让服务端可以返回一个前端声明过的自执行的函数，并带上参数，这样就完成了跨域请求。
jsonp的核心流程就是：

1. 创建一个script标签，src设置指定的跨域请求地址，query带参数和回调函数名，并声明好这个回调函数。
2. 服务端返回脚本，内容是自执行的回调函数。

现在大多用以下方案：

开发环境一般配置server代理就行，即配置devServer的proxy

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:5000', // 代理到localhost:5000
      pathRewrite: { // 转发的时候删除与请求目标地址无关的部分
        '^/api': ''
      },
      ws: true, // 用于支持websocket，vue脚手架默认是true可以不用配置
      changeOrigin: true // 用于修改请求头中的host字段，改成目标地址的host
      // changeOrigin vue脚手架默认也是true可以不用配置
    } 
  }
}

生产环境一般配置nginx反向代理

上面两种都是利用代理服务绕过了浏览器的xhr请求（因此不会报跨域问题），直接与后台发http请求

生产环境有些资源后端会直接配置允许cors请求（Access-Control-Allow-Origin），比如一些公共的库。

以上问题都是需要跨域的场景，还有一类是不应该跨域产生的问题：

csrf攻击：如果你的项目使用了cookie作为登陆凭证，就需要考虑对cookie做安全控制，恶意脚本会通过xss漏洞生成一个链接跳转到另一个网址，并通过document获取cookie信息伪造登陆用户，并向服务端发跨域请求窃取信息。解决这个问题需要服务端给cookie配置”httpOlny”来阻止浏览器操作cookie，还需要配置SameSite=Strict 阻止非同源cookie发送。这个功能依赖浏览器厂商支持，还是有风险。因此目前主流都登陆验证都不使用cookie，而是Oauth2.0认证（CSRF攻击与防范）
(https://segmentfault.com/a/1190000011145364)