跨域问题及解决方案

1.同源策略：浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，禁止不同域之间的JS进行交互

2.跨域：对于浏览器而言，只要协议、域名、端口其中一个不同就会引发同源策略，从而限制交互

3.跨域问题报错关键字：

 4.跨域解决方案之JSONP

需要后台配合

// 1.动态创建一个script
var script = document.createElement("script");
// 2.给动态创建的script标签的src属性赋值
script.src = "https://p.3.cn/prices/mgets?callback=price&skuIds=100013570347";
// 3.将script标签添加到页面中
document.head.appendChild(script);
// 4.实现接口中为我们提供的回调函数
function price(data){
    //console.log(data);
    document.getElementById("price").innerHTML = data[0].p
}

5.跨域解决方案之CORS

CORS:一个W3C标准，全称是“跨域资源共享”（cross-origin resource sharing）

普通跨域请求：只需服务端设置Access-Control-Allow-Origin即可，前端无需设置

CORS参考文档:跨域资源共享 CORS 详解 - 阮一峰的网络日志 (ruanyifeng.com)

6.跨域解决方案之proxy代理

可参考 配置参考 | Vue CLI (vuejs.org)

在项目的根目录下创建一个vue.config.js文件，粘贴上以下代码，即可解决跨域问题

module.exports = defineConfig({
  devServer: {
    proxy: {
      '/api': {
        target: 'http://iwenwiki.com/',
        changeOrigin: true,
        pathRewrite:{//路径重写
          '^/api':''
        }
      },
    }
  }
})

上面的配置表示，当在 Vue 项目中发送 /api 开头的请求时，会被代到'http://iwenwiki.com/'，并且会将请求头中的 Origin 字段设置为 http://localhost:8080（默认值），从而避免跨域问题。