什么是跨域?如何解决?

什么是跨域?如何解决?一、什么是跨域?跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。例如:a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制。理解这一点很重要!!!同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域;二、跨域访问示例假设有两个网站,A网站部署在:.

大家好,又见面了,我是你们的朋友全栈君。

一、什么是跨域?

跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

例如:a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制。理解这一点很重要!!!

同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域;

什么是跨域?如何解决?

 

二、跨域访问示例

假设有两个网站,A网站部署在:http://localhost:81 即本地ip端口81上;B网站部署在:http://localhost:82 即本地ip端口82上。现在A网站的页面想去访问B网站的信息,A网站页面的代码如下(这里使用jquery的异步请求)

$(function (){

    $.get(“http://localhost:82/api/values”, {},function (result) {

          $(“#show”).html(result);

  })});

 什么是跨域?如何解决?

从错误信息可以看出以上出现了跨域问题!

 

三、如何解决跨域问题?

由之前的介绍我们已经知道错误的原因,既然跨域会产生问题,那么我们就不跨域不就完了嘛!!!

先上图:

什么是跨域?如何解决?

首先我们用nginx作为代理服务器和用户交互,这样用户就只需要在80端口上进行交互就可以了,这样就避免了跨域问题,因为我们都是在80端口上进行交互的;

下面我们看一下利用nginx作为反向代理的具体配置:

server {

        listen      80; #监听80端口,可以改成其他端口

        server_name  localhost; # 当前服务的域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {

            proxy_pass http://localhost:81;

            proxy_redirect default;

        }

location /apis { #添加访问目录为/apis的代理配置

rewrite  ^/apis/(.*)$ /$1 break;

proxy_pass  http://localhost:82;

      }

#以下配置省略

1.当用户发送localhost:80/时会被nginx转发到http://localhost:81服务;

2.当界面请求接口数据时,只要以/apis 为开头,就会被nginx转发到后端接口服务器上;

总结:nginx实现跨域的原理,实际就是把web项目和后端接口项目放到一个域中,这样就不存在跨域问题,然后根据请求地址去请求不同服务器(真正干活的服务器);

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143928.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • gallery的画廊效果

    gallery的画廊效果

  • SDIO接口概念介绍「建议收藏」

    SDIO接口概念介绍「建议收藏」SDIO卡是在SD内存卡接口的基础上发展起来的接口,SDIO接口兼容以前的SD内存卡,并且可以连接SDIO接口的设备,目前根据SDIO协议的SPEC,SDIO接口支持的设备总类有蓝牙,网卡,电视卡等。  SDIO协议是由SD卡的协议演化升级而来的,很多地方保留了SD卡的读写协议,同时SDIO协议又在SD卡协议之上添加了CMD52和CMD53命令。由于这个,SDIO和SD卡规范间的一

  • VS2015序列号_autocad2008激活序列号

    VS2015序列号_autocad2008激活序列号
    VisualStudioTeamSystem2008TeamSuite(vs2008)正式中文版   
    VS2008简体中文正式版序列号大全
      
    1.VisualStudio2008ProfessionalEdition:
    XMQ2Y-4T3V6-XJ48Y-D3K2V-6C4WT
      
    2.VisualStudio2008TeamTestLoadAgent:
    WPX3J-BXC3W-BPYW

  • 人工智能猴子摘香蕉代码_猴子妈妈有14个香蕉

    人工智能猴子摘香蕉代码_猴子妈妈有14个香蕉只有简单的状态显示#include"iostream"usingnamespacestd;voidAT(charmonkeyplace,charboxplace){cout<<"AT(monkey,"<<monkeyplace<<")"<<endl;cout<&

  • Docker技术( 容器虚拟化技术 )「建议收藏」

    Docker虚拟化容器技术第一章Docker简介诞生背景Docker介绍虚拟机技术容器虚拟化技术官方网址第二章Docker安装前提条件安装DockerDocker底层原理Docker结构图工作原理Docker为什么比VM快第三章Docker常用命令帮助命令镜像命令容器命令第一章Docker简介诞生背景一款产品从开发到上线,从操作系统,到运行环境,再到应用配置。作为开发…

  • JVM 优化实战[通俗易懂]

    JVM 优化实战[通俗易懂]本文讲解了JVM的内存划分和分配策略,并以截图和脚本展示常用可视化和命令行工具的使用方法,完整演示了JVM优化、内存泄露排查、gc.log分析方法等。作者:王克锋 出处:https://kefeng.wang/2016/11/22/java-jvm/ 版权:自由转载-非商用-非衍生-保持署名,转载请标明作者和出处。1GC相关内存1.1内存划分1.1.1堆(Heap)存放 newM…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号