跨域相关问题、跨域是怎么产生的、跨域的解决方案

跨域问题是怎么产生的

本身是通过浏览器本身的安全策略产生的跨域问题

网页的url与你调用接口的url不一样（协议、域名、端口号），就会产生跨域问题。

通俗的讲：你去肯德基吃东西，非得想吃拉面，拉面管把拉面给你送来了，但是肯德基店员不把拉面给你，给你扣住了。所以你吃不到拉面。
其实你在请求数据的时候，服务器已经把数据给传递过来了，但是被浏览器给“拦截”了，以至于你获取不到数据。

跨域问题报错

解决方案

1. jsonp

通过src href请求下来的js，css资源是不存在跨域问题的，jsonp就是基于该原理实现的

    <script>
      window.callback = function (data) {
        console.log("data", data);
      };
    </script>
    <script src="http://localhost:8001/index.js"></script>
    原理是src不受跨域影响，所以让后台返回一个js文件，js里的代码包含数据。一般就是前端写个函数，把函数名告诉后端，后端返回一段js文件，里边内容为执行这个函数并传参，参数就是要返回的数据

2. 配置请求头

Access-Control-Allow-Origin

• *：允许所有请求通过
• 域名，只允许指定域名的请求

第①种：在请求控制器加上加上下面的代码；

header(“Access-Control-Allow-Origin”, “*”);

var express = require("express");
//90端口的服务，将当前目录作为http服务
var app = express();
app.use(express.static(__dirname));
app.listen(90);

//91端口的服务 返回数据
var app2 = express();
app2.get("/", function (req, res) {
  //   设置请求头 实现跨域
  res.header("Access-Control-Allow-Origin", "*");
  res.send("你好");
});
app.listen(91);

第②种：在被请求页面加上下面的代码，最好content填写域名；

<meta http-equiv="Access-Control-Allow-Origin" content="*">

第③种方法：IIS、Apache、Nginx可以直接配置Access-Control-Allow-Origin 跨域

1、IIS配置：只需要在IIS添加HTTP响应标头即可！
Access-Control-Allow-Headers：Content-Type, api_key, Authorization
Access-Control-Allow-Origin：*

2、Apache配置：主要修改http.conf
<Directory "/Users/cindy/dev">
AllowOverride ALL
Header set Access-Control-Allow-Origin *
</Directory>
或者，修改Apache伪静态规则文件.htaccess
<IfModule mod_setenvif.c>  
    <IfModule mod_headers.c>  
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">  
            SetEnvIf Origin ":" IS_CORS  
            Header set Access-Control-Allow-Origin "*" env=IS_CORS  
        </FilesMatch>  
    </IfModule>  
</IfModule>  

3、Nginx配置：主要是修改nginx.conf；
location ~* \.(eot|ttf|woff|svg|otf)$ {
     add_header Access-Control-Allow-Origin *;
}
上面的eot|ttf|woff|svg|otf，表示请求后缀类型，或者也可以直接写如下代码：
location / {  
  add_header Access-Control-Allow-Origin *;  
}  

配置前端

配置代理->利用中转服务器发送请求

以vue为例 在vue.config.js 文件里配置代理

module.exports = {
  publicPath: "/xxxxxx/",
  outputDir: "xxxxxxx", // 输出文件目录
  devServer: {
    proxy: {
      "/test": {
        target: "http://10.168.4.70:9902/", // test
        pathRewrite: {
          "^/test": "",
        },
      },
    },
  },
};