什么是跨域？JS跨域/Vue代理跨域/nginx代理跨域

一、什么是跨域？

所谓跨域 即要牵扯到 同源策略

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域 引发限制；

同源策略 即是浏览器的核心 浏览器的安全手段 防止被他人窃取数据信息等等

// 注意 端口号默认80 可省略

// 引发同源限制后 首先dom无法获取 cookie和localStorage无法读取 ajax无法发送请求

// 同源策略这一措施 对开发人员前后端数据交互造成了困扰 所以有了跨域的解决方案

二、如何解决跨域问题？ 

   jsonp方式

// jsonp方式是通过script标签的src属性进行跨域 调用接口获取数据的 因为src属性具有天然可跨域特性 可以无视同源限制
// 这种标签 还有img的src和link的href属性同样具有跨域的特性 那么为什么？jsonp方式采用的是script标签 因为script标签会将读取到的数据 当做js代码来执行

// 注意： jsonp的缺点 只能发送get请求


// jsonp的请求方式 演示：
   document.querySelector("button").onclick = function () {
     // 1、创建script标签
     let scr = document.createElement("script")
     // 2、设置好接口地址
     scr.src="http://baidu.com:8080"
     // 3、发送请求
     document.body.appendChild(script)
     // 4、外部定义fn函数拿到数据
     // 5、如何由前端定义函数名 在发送请求时 携带参数callback
     // 6、请求地址上携带参数 加一个问号即可
     // 7、"http://baidu.com:8080/jsonp?callback=fn2"
   }
// 我们通过script的src属性调用接口 会返回给我们一个fn函数 函数中携带参数 所以我们要在外部写一个fn函数 定义形参 从而获取到这个数据
   function fn(data) {
     console.log(data);
   }

cors方式

 // 注意：需要服务端进行配置 允许资源共享

 // 服务器的代码：
 // 允许所有的域名访问这个接口
    ctx.set('Access-Control-Allow-Origin', '*');
 // 允许http://www.test.com这个域名访问这个接口
    ctx.set('Access-Control-Allow-Origin', 'http://www.test.com');

Vue代理跨域

  // 代理
  devServer: {
    // 反向代理配置
    proxy: {
      '/cindasc': {
        // 其实就是通过webpack起了一个node服务代替你发送请求 要访问的跨域的api域名
        target: 'http://127.0.0.1:8000',
        ws: false, // Websocket 长连接, 太烦了 关了
        changOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': '/',
        },
      },
    },
    port: port, // 端口号
    open: true, // 禁止自动启动
    overlay: {
      // 让浏览器 overlay 同时显示警告和错误
      warnings: false,
      errors: true,
    },
  },

nginx配置代理(丢到线上时的跨域)

更改之后 ./nginx -s reload 重新加载

    server {
        #监听端口
        listen       8000;
        listen       [::]:8000;
        #服务运行地址
        server_name  localhost;
        #静态资源目录
        root   /home/web/myFrame/;
        error_page 404 /404.html;
	   location / {
	     add_header Cache-Control "no-store, no-cache, no-transform, must-revalidate, max-age=0";
		index index.html index.htm;
		#配合vue-router的history模式
#		try_files $uri $uri/ @router;
	   }
        location = /404.html {
          root  /home/web/myFrame/index.html;
        }
    
	   location /page/project/static/ {
          alias  /home/web/myFrame/static/;
        }
        error_page 500 502 503 504 /50x.html;
      
        location = /50x.html {
        }

# 这里就是代理的配置  接口转发  核心proxy_pass http 一定要带反斜杠
# 结尾无斜杠,nginx会将请求路径全部代理过去
# 结尾有斜杠,nginx会将请求路径匹配location的剔除后再代理过去
	   location / {
#          proxy_pass http://127.0.0.1:8000/;
#          proxy_redirect off;
#          proxy_set_header Host $host;
#          proxy_set_header X-Real-IP $remote_addr;
#          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#          proxy_set_header   Cookie $http_cookie;
#          # for Ajax
#          #fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
#          proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
#          proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
#          proxy_set_header x-requested-with $http_x_requested_with;
#          client_max_body_size 10m;
#          client_body_buffer_size 128k;
#          proxy_connect_timeout 90;
#          proxy_send_timeout 90;
#          proxy_read_timeout 90;
#          proxy_buffer_size 128k;
#          proxy_buffers 32 32k;
#          proxy_busy_buffers_size 128k;
#          proxy_temp_file_write_size 128k;
	   }
    }