前端跨域解决方案

1. 跨域是什么

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

2. 常见的前端跨域解决方案

• CORS跨域
• JSONP跨域
• 代理跨域

4. CORS（Cross-origin resource sharing：跨域资源共享）跨域

• 服务端设置，前端直接调用
• 后台允许前端某个站点进行访问
• 三个与CORS有关的请求头字段，Access-Control-Allow-Origin（必须）：接受的域名，Access-Control-Allow-Credentials（可选）：是否允许发送Cookie，Access-Control-Expose-Headers（可选）：CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定

5. JSONP跨域

需要前后端共同配合

npm i jsonp -S

import jsonp from "jsonp";

let url = "https://www.xxx.com?callback=func";
jsonp(url, (err, res) => {
    console.log(res);
})

6. 接口代理跨域

vue.config.js

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

// 访问http://localhost:8080/api/test会被代理到https://www.xxx.com/api/test