简谈Javascript跨域问题

 

1.关于JS异步通讯

Javascript在进行前后端通讯时我们通常采用AJAX方式异步调用数据,后端输出JSON以提供数据,在我们开发环境下,与后端交互,或从网络站点抓取数据时会出现跨域问题。在后端支持的情况下,我们可以使用jsonp来调用数据。

2.关于Json

Json是我们最常见的与前端交互的异步传输格式,在后端设置了HTTP头Access-Control-Allow-Origin的情况下(CORS)我们可以通过AJAX成功调用数据。

3.关于Jsonp

Jsonp是天然支持跨域的,它的原理是通过Get方式将获取到的数据以脚本的方式来执行,在这种情况下后端是必须要输出一个callback标签头以供Jsonp处理数据,如果没有后端的支持异或是我们调用网络网站的数据,Jsonp是不能成功抓取数据的。

4.解决方案

处理跨域问题我们可以采用Nginx反向代理的形式,将异域的调用地址挂载于服务器上实现同域访问。

Eg:

www.example.com/api/select?id=221 我们将该地址反向代理为 /api 路径实现同源访问

具体步骤:

打开nginx配置文档 设置

location ^~/api/
{ 
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://api.123.com/; 
}

通过此步我们将api.123.com挂载到了服务器,访问地址为 /api

Nginx反向代理来解决JS跨域问题 在开发环境或生产环节都适用 并且是完全无侵入的 。

5.关于Vue

在Vue-cli脚手架下开发,我们还有更为简便的方法,即使用proxyTable,我们可以将它理解为一个地址映射表,和nginx反向代理实现的结果相同。

具体步骤:

proxyTable: {
  '/api': {
    target: 'http://www.123.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}

调用部分只用写成 /api 就可以代表 www.123.com/api



无觅相关文章插件,快速提升流量

About webmaster

博主目前为学生,业余时间专注于分享互联网潮流资讯,前沿WEB技术,渗透技术,APT,XSS,RFID,SDR,GSM,RF等技术.此前对前端渗透有较深建树,建博旨在记录与发表前沿技术.感谢大家关注...

分享到:
No Response
Comment (0)
Trackback (0)
Leave a Reply

昵称*

邮箱*

网址

0

贴入百度统计、CNZZ、51啦、量子统计代码等等