前端跨域解决方案

什么是前端跨域？

• 跨域是浏览器为了安全而做出的限制策略
• 浏览器请求必须遵循同源策略：同域名，同端口，同协议

怎么解决前端跨域？

• CORS跨域

  • CORS跨域-服务端设置，前端直接调用
  • 说明：后台允许前端某个站点进行访问

• JSONP跨域

  • JSONP跨域 - 前端适配，后台配合
  • 说明：前后端同时改造
  • JSONP不是一个XHR请求，只是一段脚本而已

• 代理跨域

  • 接口代理：通过修改nginx服务器配置来实现

  • 说明：前端修改，后台不动

  • 最常用的方式

    • 在项目根目录下新建一个vue.config.js文件

    • module.exports = {
        devServer: {
          host: 'localhost',
          port: 8080,
          proxy: {
            '/api': {
              target: 'https://www.xxxx.com',
              changeOrigin: true,
              pathRewrite: {
                '/api': ''
              }
            }
          }
        }
      }