跨域问题是怎么产生的

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

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

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

ios 支持跨域cookie 苹果跨域问题_apache

跨域问题报错

解决方案

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 *;  
}

配置前端

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

ios 支持跨域cookie 苹果跨域问题_Access_02


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

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